JQuery – перебор элементов

Добрый день уважаемые друзья!

В данной статье речь пойдёт о том, как можно перебрать элементы (теги) с помощью функции библиотеки JQuery. А конкретно, для перебора элементов, мы рассмотрим функцию each.

Перебор элементов с помощью функции each может быть использован для различных задач стоящих перед веб-разработчиком.

В нашем случае мы рассмотрим как значение атрибутов одних элементов присвоить другим.

Для примера возьмём следующую html-конструкцию, где внутри тегов <a> располагаются теги изображений <img>.

<a href="/">
	<img src="/images/jquery-kot-1.jpg">
</a>

<a href="/">
	<img src="/images/jquery-kot-2.jpg">
</a>

<a href="/">
	<img src="/images/jquery-kot-3.jpg">
</a>

Задача заключается в том, что бы у изображений взять значения атрибута src и присвоить его атрибуту href ссылкам которые являются родительскими по отношению к изображениям.

Для этого нам необходимо перебрать все элементы.

Для тех, кто знаком с циклами языков программирования, например с циклом while или for, тот понимает, что данный перебор можно было бы сделать на основе цикла в JavaScript. Но библиотека JQuery имеет замечательную функцию each, которая позволяет нам перебрать элементы не прибегая к циклам языка JavaScript.

Код для перебора элементов представлен ниже:

var datatag = jQuery("img");
datatag.each(function() {
	var spdata = jQuery(this).attr("src");
	jQuery(this).parent("a").attr({"href":spdata});
});

• В первой строке, мы объявляем переменную datatag и присваиваем ей элемент, с которым будем работать.
• На второй строке вначале, перед функцией each, мы указываем эту переменную.
• На третьей строке мы объявляем новую переменную spdata и присваиваем ей значение атрибута src изображения.
• На четвёртой строке мы атрибуту href родительского элемента, присваем переменную spdata. А точнее, значение переменной spdata.

Таким образом, функция each обойдёт все элементы img на странице.

Исходник функции each библиотеки JQuery для перебора элементов, можно скачать по ссылке: исходник урока «JQuery – перебор элементов».

Надеюсь данный материал был полезен.

С уважением, Анатолий Черкес.