Получение массива входных значений с помощью Jquery

Question

Я выбираю все входные элементы с классом "img-title", чтобы получить массив с текущим значением этих входных данных:

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

Но это не работает, потому что элементы $(".img-title") - это не ссылки на входные данные, как я ожидал, а HTML-код, поэтому val() вызывает ошибку. Есть ли простой способ получить массив с текущими значениями входов с классом "img-title"?

Answer 1

Когда вы используете for..of над коллекцией jQuery, возвращаемые вами элементы - это сами элементы, а не коллекция jQuery, которая содержит этот элемент. Либо превратите элемент в коллекцию jQuery, прежде чем вызывать .val() для него:

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
);