С помощью селектора jQuery мы выбрали какие то элементы. Как теперь организовать их перебор в цикле? Есть пара вариантов.
Используем функцию $.each(func)
Разработчики не могли не заложить перебор по найденным элементам в библиотеку. Параметром должна быть функция, в которую передаётся два значения — номер элемента и ссылка на сам элемент DOM. Как пользоваться — см. пример.
|
|
jQuery("#nav span").each( function (index, elem) { if (jQuery(elem).hasClass('selected')) { alert('выбранный элемент найден, его № ' + index); jQuery(elem).addClass('found'); //прервать перебор можно, возвратив false return false; } else { alert('проверяем элемент № ' + index ); } } ); |
В примере мы перебираем элементы span в некотором контейнере #nav. На каждой итерации сообщаем номер элемента. В случае обнаружения SPAN.selected — сообщаем об этом, добавляем ему класс .found и прекращаем поиск.
Ручной перебор найденных селектором jQuery элементов
Возможно организовать перебор и без функции each. У нас есть выбранные элементы, мы знаем их кол-во — организуем цикл for по ним.
|
|
var nav = jQuery("#nav span"); for(var k = 0; k < nav.length; k++) { var elem =- jQuery(nav).get(k); if (jQuery(elem).hasClass('selected')) { alert('выбранный элемент найден, его № ' + k); jQuery(elem).addClass('found'); //прервать перебор можно, прервав цикл break; } else { alert('проверяем элемент № ' + k ); } } |
Первый вариант изящнее, но есть один нюанс. Внутри функции перебора (в первом случае) переменная this будет иметь значение текущего элемента. Возможны и какие то другие коллизии локальных и глобальных переменных.
Написать комментарий
Данная запись опубликована в 18.10.2015 18:17 и размещена в рубрике jQuery.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 13, 2017 г.
Два вероятных случая могут генерировать данное сообщение в консоли браузера.
Раннее обращение к js плагину
Те или иные свойства могут быть недоступны, если вы обращаетесь к методам и свойствам до того как они определены. В данном случае обращение ...
Читать
Март 13, 2013 г.
Долгая, вообще, история с картинками. Хорошо, если есть шаблон, где предусмотрены позиции картинок, может быть какой то слайдер или галерея. А все картинки ...
Читать
var elem =- jQuert(nav).get(k);
jQuert — не уверен, что это правильно
Да, это «очепятка». Спасибо за внимательность, поправил.