• Страница 1 из 1
  • 1
Форум » II. jQuery » Начало работы с jQuery » Работа с каждым из элементов выборки (Знакомство с анонимной функцией)
Работа с каждым из элементов выборки
1 Как мы уже знаем, большинство функций jQuery автоматически прорабатывают в цикле каждый элемент выборки.

К примеру, одной строкой кода можно скрыть все элементы img на странице:

Код
$('img').fadeOut();


А что если нужно для каждого в отдельности элемента выборки выполнить определённое действие?

Для этой цели библиотека jQuery предлагает воспользоваться функцией each().
Размещается она после выборки элементов:

Код
$('селектор').each();


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

Анонимная функция будет содержать набор действий, который вы хотите произвести над каждым из элементов выборки.

Базовая структура анонимной функции такова:

Код
function() {
  /* здесь размещается код */
}


далее просто помещаем её в функцию each():

Код
$('селектор').each(function() {
  /* здесь размещается код */
});


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

Допустим, на странице сайта размещены 10 изображений. Сделаем выборку и для каждого изображения определим действие - всплывающее окно с текстом: "Найдено изображение!"

Код
$('img').each(function() {
  alert('Найдено изображение!');
});


в результате на странице сайта появится 10 диалоговых окон с сообщением о найденном изображении.

Функция document.ready() также может принимать в качестве аргумента анонимную функцию:

Код
$(document).ready(function() {
  /* здесь код анонимной функции */
});

Изменить / Удалить

2 Ключевые слова this и $(this)

Слово this относится к элементу DOM, и позволяет получить доступ к элементу, прорабатываемому в настоящий момент в цикле.
This относится к элементу, вызывающему анонимную функцию. При первом проходе цикла слово this относится к первому элементу выборки, при втором - ко второму и так далее.

Эквивалентом его в jQuery является ключевое слово $(this).

Чтобы разобраться, как использовать ключевое слово $(this), рассмотрим задачу:

1. найти на странице сайта все внешние ссылки

2. получить атрибут href каждой ссылки

3. добавить эти ссылки в список ссылок, используемых на странице

Первым делом определим на странице элемент, в котором мы будем размещать все найденные нами внешние ссылки. Пусть это будет блок div с идентификатором listLinks:

Код
<div id = "listLinks"></div>


Внутри добавим какой-нибудь заголовок для ясности:

Код
<div id = "listLinks">

<h2>Ссылки, используемые на странице:</h2>

</div>


Ну и, конечно же, ссылки лучше хранить списком:

Код
<div id = "listLinks">

<h2>Ссылки, используемые на странице:</h2>

<ul id = "bibliografia"></ul>

</div>


Первым делом, нам нужно получить выборку всех ссылок, ведущих за пределы нашего сайта. Как мы знаем, сделать это можно, используя селектор атрибута:

Код
$('a[href^="http://"]')


теперь используем функцию each(), запускающую автоматический цикл для каждой ссылки:

Код
$('a[href^="http://"]').each()


добавляем в качестве аргумента для функции each() анонимную функцию:

Код
$('a[href^="http://"]').each(function() {

});


Теперь нам нужно понять, какие действия будет выполнять анонимная функция?

Первым делом, нам нужно вернуть url-адрес каждой ссылки, но так как он у каждой ссылки свой, тут нам и пригодится ключевое слово $(this).
Возвращённый url-адрес будем сохранять в переменную webAdress:

Код
$('a[href^="http://"]').each(function() {

  var webAdress = $(this).attr('href');

});


при каждом проходе цикла в переменной webAdress будет сохраняться новое значение, а $(this) будет относиться к иной ссылке на странице.

Теперь нам остаётся лишь присоединить новый элемент к списку ul в его конец с помощью функции append():

Код
$('a[href^="http://"]').each(function() {

  var webAdress = $(this).attr('href');

  $('bibliografia').append('<li>' + webAdress + '</li>');

});


Что у нас получилось в итоге, можете посмотреть сами.

Изменить / Удалить

Форум » II. jQuery » Начало работы с jQuery » Работа с каждым из элементов выборки (Знакомство с анонимной функцией)
  • Страница 1 из 1
  • 1
Поиск: