<b>// Отыскать все элементы <script> в теле документа</b>
<b>var bodyscripts = $("script", document.body); </b>
<b>bodyscripts.selector // => "script" </b>
<b>bodyscripts.context // => document.body </b>
<b>bodyscripts.jquery // => "1.4.2"</b>
Если потребуется обойти в цикле все элементы в объекте
<b>jQuery</b>
, вместо цикла
<b>for</b>
можно использовать метод
<b>each().</b>
Метод
<b>each()</b>
напоминает метод
<b>forEach()</b>
массивов, определяемый стандартом ECMAScript 5 (ES5). В единственном аргументе он принимает функцию обратного вызова, которая будет вызвана для каждого элемента в объекте
<b>jQuery</b>
(в порядке следования в документе). Эта функция вызывается как метод элемента, т.е. внутри функции ключевое слово
<b>this</b>
ссылается на объект
<b>Element</b>
. Кроме того, метод
<b>each()</b>
передает функции обратного вызова индекс и элемент в первом и втором аргументах. Обратите внимание, что ссылка
<b>this</b>
и второй аргумент ссылаются на обычные элементы документа, а не на объекты
<b>jQuery</b>
. Если для работы с элементом внутри функции потребуется использовать методы объекта
<b>jQuery</b>
, передайте этот элемент функции
<b>$()</b>
.
Метод
<b>each()</b>
объекта
<b>jQuery</b>
имеет одну особенность, которая существенно отличает его от метода
<b>forEach():</b>
если функция обратного вызова вернет false для какого-либо элемента, итерации будут остановлены после этого элемента (это напоминает использование ключевого слова
<b>break</b>
в обычном цикле). Метод
<b>each()</b>
возвращает объект
<b>jQuery</b>
, относительно которого он был вызван, благодаря чему он может использоваться в цепочках вызовов методов. Например (здесь используется метод
<b>prepend(),</b>
который будет описан в разделе 19.3):
<b>// Пронумеровать элементы div документа вплоть до элемента div#last (включительно) </b>
<b>$("div").each(function(idx) { // отыскать все элементы <div> и обойти их</b>
<b>$(this).prepend(idx +":"); // Вставить индекс в начало каждого</b>
<b>if (this.id === "last") return false; // Остановиться по достижении </b>
<b>}); // элемента «last</b>
Несмотря на широту возможностей, метод
<b>each()</b>
не слишком часто используется на практике, поскольку методы объекта
<b>jQuery</b>
обычно неявно выполняют итерации по всем выбранным элементам и выполняют операции над ними всеми. Надобность в методе
<b>each()</b>
обычно возникает только в случае, когда необходимо обработать выбранные элементы каким-то другим способом. Но даже в этом случае необходимость в методе
<b>each()</b>
может отсутствовать, поскольку многие методы объекта
<b>jQuery</b>
позволяют передавать функцию обратного вызова.
Библиотека jQuery поддерживает методы массивов, определяемые стандартом ES5, и содержит пару методов, по своей функциональности похожих на методы в стандарте ES5. Метод
<b>map()</b>
объекта
<b>jQuery</b>
действует практически так же, как метод
<b>Array.map().</b>
Он принимает функцию обратного вызова в виде аргумента и вызывает ее для каждого элемента в объекте
<b>jQuery</b>
, собирая значения, возвращаемые этой функцией, и возвращая новый объект
<b>jQuery</b>
, хранящий эти значения. Метод
<b>map()</b>
вызывает функцию точно так же, как это делает метод
<b>each():</b>
он передает ей элемент в виде ссылки
<b>this</b>
и во втором аргументе, а в первом аргументе - индекс элемента. Если функция обратного вызова вернет null или undefined, это значение будет проигнорировано и не будет добавлено в новый объект
<b>jQuery</b>
. Если функция обратного вызова вернет массив или объект, подобный массиву (такой как объект
<b>jQuery</b>
), этот объект будет «развернут» и содержащиеся в нем элементы по отдельности будут добавлены в новый объект
<b>jQuery</b>
. Обратите внимание, что объект
<b>jQuery</b>
, возвращаемый методом
<b>map(),</b>
может хранить объекты, не являющиеся элементами документа, но он по-прежнему будет действовать как объект, подобный массиву. Например:
<b>// Отыскать все заголовки, отобразить их в значения их атрибутов id,</b>
<b>// преобразовать результат в настоящий массив и отсортировать его.</b>
<b>$(":header").map(function() { return this.id; }).toArray().sort();</b>
$() в сравнении c querySelectorAII()
Функция
<b>$()</b>
похожа на метод
<b>querySelectorAll()</b>
объекта
<b>Document</b>
, с которым мы познакомились в разделе 15.2.5: оба принимают CSS-селектор в виде аргумента и возвращают объект, подобный массиву, хранящий элементы, соответствующие селектору. Библиотека jQuery использует метод
<b>querySelectorAll()</b>
в броузерах, поддерживающих его, однако существуют веские причины, почему в своих программах следует использовать функцию
<b>$()</b>
, а не метод
<b>querySelectorAll()</b>
: