Как перебрать элементы в массиве Jquery

Question

У меня есть массив элементов, для каждого из которых я хочу сделать определенное действие.

Я беру 2 элемента и заношу их в массив:

let $inputTel = $vacanciesPopup.find('.vacancies-popup-input-tel');
let $inputCity = $vacanciesPopup.find('.vacancies-popup-input-city');
let requiredInputs = [$($inputTel), $($inputCity)];

И пытаюсь перебирать их. Причем я хочу чтобы у меня был доступ к каждому элементу через this:

requiredInputs.each(function() {
        console.log(111);
    })

Но мне выводит ошибку:

Uncaught TypeError: requiredInputs.each is not a function

В то же время я могу обратиться к каждому элементу по индексу и получаю их корректное значение:

console.log(requiredInputs[0].val());
console.log(requiredInputs[1].val());

Как я могу перебирать этот массив и иметь доступ к каждому элементу через this?

Answer 1

Если вы взяли два элемента и решили пройтись по ним, то проще использовать такую запись

let $inputTel = $vacanciesPopup.find('.vacancies-popup-input-tel');
let $inputCity = $vacanciesPopup.find('.vacancies-popup-input-city');
let requiredInputs = [$inputTel.val(), $inputCity.val()];

console.log(requiredInputs[0].val()); // Значение
console.log(requiredInputs[1].val()); // Значение

.each() может перебрать и массив:

let $vacanciesPopup = $('.test');

let $inputTel = $vacanciesPopup.find('.vacancies-popup-input-tel');
let $inputCity = $vacanciesPopup.find('.vacancies-popup-input-city');
let requiredInputs = [$inputTel, $inputCity];

$.each(requiredInputs, function(i) {
  console.log(requiredInputs[i].val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test">
  <input type="text" class="vacancies-popup-input-tel" value="bla1">
  <input type="text" class="vacancies-popup-input-city" value="bla2">
</div>

Но, говорят лучше через for

let $vacanciesPopup = $('.test');

let $inputTel = $vacanciesPopup.find('.vacancies-popup-input-tel');
let $inputCity = $vacanciesPopup.find('.vacancies-popup-input-city');
let requiredInputs = [$inputTel, $inputCity];

for(let i = 0; i < requiredInputs.length; i++) {
  console.log(requiredInputs[i].val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test">
  <input type="text" class="vacancies-popup-input-tel" value="bla1">
  <input type="text" class="vacancies-popup-input-city" value="bla2">
</div>

Answer 2

Метод each() работает с jQuery обьектом, поэтому ваш массив должен быть jQuery обьектом

let requiredInputs = $vacanciesPopup.find('.vacancies-popup-input-tel, .vacancies-popup-input-city');

requiredInputs.each( function(){
    console.log( jQuery( this ).val() )
} );

Answer 3

Т.к. requiredInputs это у вас массив js, а не коллекция, полученная через селектор jquery, то и цикл нужно брать нативный forEach()

let $inputTel = $(document).find('.vacancies-popup-input-tel');
let $inputCity = $(document).find('.vacancies-popup-input-city');
let requiredInputs = [$inputTel, $inputCity];

requiredInputs.forEach(function(el) {
    console.log($(el).val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="text" class="vacancies-popup-input-tel" value="123">
<input type="text" class="vacancies-popup-input-city" value="456">

БЛОГ НА HUSL

Как перебрать элементы в массиве Jquery

Ответы (3 шт):