使用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()之前， .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
);