Перебор элементов на JavaScript

Рассмотрим несколько простых способов перебора элементов, которые были получены по какому-то «селектору» на JavaScript. Все варианты кода делают одинаковую работу и умещаются в 3 строки.

Перебор на чистом JavaScript

Начнем с перебора циклом «for». Он позволяет поочередно получить доступ к каждому элемену.

var Menu = document.querySelectorAll('#menu a');

for (let el of Menu) {
    var href = el.getAttribute('href');
}

В примере выбрали ссылки меню и в цилке получили доступ к их адресам.

Тот же функционал с помощью цикла «forEach»:

var Menu = document.querySelectorAll('#menu a');

[].forEach.call(Menu, el => {
    var href = el.getAttribute('href');
});

Перебор элементов на jQuery

А теперь рассмотрим тоже самое на jQuery. Это позволяет немного сократить синтаксис кода, но общее количество строк остается таким же, как и в примерах на чистом javascript.

var Menu = $('#menu a');

$(Menu).each(function(){
   var href = $(this).attr('href'); 
});

К «селектору» применяем цикл «each», внутри которого текущий элемент содержится в объекте «this».