13.4.5.1. Последовательный вызов функций

Главная особенность большинства методов jQuery – это возможность связывать их в цепочки. Методы, манипулирующие элементами документа, обычно возвращают эти объекты для дальнейшего использования, что позволяет писать примерно следующее:

// Заполняем скрытый элемент <div id="divEdit"></div> текстом и показываем его

$("#divEdit").html(response).show();

// найти <select id="my_select">...</select>

var sel = $("#my_select");

// добавляем к нему <option value="1">Пример опции</option>

$("<option></option>") // создаем требуемый элемент

.attr("value", 1) // устанавливаем значение одного из его атрибутов

.html("Пример опции") // записываем в него текст

.appendTo(sel); // прикрепляем к уже существующему элементу

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

13.4.6. Работа с индивидуальными элементами

Функция $() возвращает коллекцию элементов. Так, $("p") вернет массив всех элементов <p>, какие только могут присутствовать на странице (или пустой массив, если таких элементов не существует). Одним из условий работы большинства функций jQuery является непременная обработка всех элементов в возвращаемой коллекции.

Например:

1. 1. Цвет всех ссылок на странице станет зеленым:

2. $("a").css("color", "green");

3. 2. Ко всем элементам div с классом test будет добавлен новый элемент:

4. $("div.test").append("<span>Тестовый элемент</span>");

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

13.4.6.1. Индексы и get([index])

Возвращаемая функцией $() коллекция является "псевдо-массивом" DOM-элементов. Поэтому можно обратиться к индивидуальным элементам по их индексу:

$("p")[0].className = "test";

Иногда, правда, необходимо обратиться непосредственно к массиву DOM-объектов, скрытых внутри "псевдо-массива", которым является объект jQuery. Для этого используется функция get():

$("p"); // Получили объект jQuery

$("p").get(); // Получили соответствующую коллекцию DOM-элементов

Более того, метод get позволяет обращаться непосредственно к индивидуальным элементам коллекции:

$("a").get(0); // Получили первую из всех ссылок на странице

13.4.6.2. Each(fn)

Иногда нужно пробежаться по всем элементам коллекции и выполнить над ними какие-то действия. Для этого понадобится функция each. Эта функция принимает в качестве аргумента другую функцию. each() работает в контексте найденных элементов и поэтому каждый раз, когда выполняется переданная ей функция, в этой функции доступна переменная this, указывающая на соответствующий DOM-элемент:

$("p").each(

function() {

// внутри функции this указывает на текущий DOM-элемент

alert(this.innerHTML);

}

);

В этом примере находятся все элементы p на странице, и для каждого из этих элементов вызывается функция, которая показывает его содержимое.

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

Для иллюстрации перепишем пример с раскраской нечетных строк таблицы с помощью each(). Если есть некая таблица с id="zebra" и CSS-класс "odd" для нечетных строк, то можно написать так:

$("#zebra tr").each(colorize); // передаем в each функцию colorize

function colorize(index) {

if (index % 2 == 1) // index является индексом текущего элемента в коллекции

$(this).addClass("odd");

}