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

Перебор элементов на JavaScript
Комментарии: 2

Рассмотрим несколько простых способов перебора элементов, которые были получены по какому-то «селектору» на 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».

Темы:
JavaScriptjQuery
Ещё интересное — 6
Комментарии —
  1. NAN
    NAN16 июня 2021, 11:37#
    > var Menu = document.querySelector('#menu a');

    может быть querySelectorAll?
    1. Andy Si16 июня 2021, 11:40#
      Ты прав на все 100. Поправил.
    © REALADMIN.RU   2024 г.
    Страница сгенерирована: 0,1995 s | 4 mb.
    На каком уровне Вы играете в шахматы?
    OPROS