使用jQuery获取输入值数组

Question

我正在选择所有带有“ img-title”类的输入元素，以便获得具有这些输入的当前值的数组：

var values = []
for (let element of $(".img-title")){ 
   values.push( element.val() ) }

但是这不起作用，因为$(".img-title")的元素不是我所期望的对输入的引用，而是html代码，因此val()会引发错误。有没有一种简单的方法来获取具有“ img-title”类的输入的当前值的数组？

Answer 1

在jQuery集合上使用for..of时，返回的项是元素本身，而不是包含该元素的jQuery集合。在调用.val()之前，先将其转换为jQuery集合：

const values = []
for (const element of $(".img-title")){ 
  values.push( $(element).val() )
}

或者，仅通过.value访问本机元素上的属性：

const values = []
for (const element of $(".img-title")){ 
  values.push( element.value )
}

或者，考虑改用.map：

const values = $(".img-title")
  .map(function() {
    return $(this).val();
  })
  .get();

（确保最后使用.get()来获取数组，而不是jQuery集合）

或者，如果您愿意的话，完全避免使用jQuery，不需要为此类简单的事情包含一个大库：

const values = Array.prototype.map.call(
  document.querySelectorAll('.img-title'),
  element => element.value
);