Данная статья продолжает тему Выборки элементов объектной модели документа DOM с помощью библиотеки jQuery. Предполагается, что Вы уже познакомились с первой частью статьи и имеете представление о библиотеке jQuery. На этой странице рассматриваются следующие вопросы :

фильтрации элементов, .filter();
поиска элементов, .find('p');
возвращение к предыдущему набору, .end();
включение родительского элемента, .andSelf();
методы перебора элементов в выборке;
примеры фильтров.

Метод фильтрации, filter

Приступим к рассмотрению вопроса фильтрации элементов выборки. На главной странице описания библиотеки jQuery был представлен пример с использованием фильтра, который выбирал элементы из набора по идентификатору. В упрощенном виде страница данного примера имеет следующий код :

<body>
    <h3>Пример jQuery</h3>
    <div id="id1">Полный текст первого абзаца</div>
    <div class="id1">Полный текст второго абзаца</div>
    <script>
        // Изменить стиль текста элемента с id="id1"
        $('div').filter('#id1').css('font-style', 'italic');
    </script>
</body>

В данном примере сначала функция jQuery выбирает все элементы <div>, после чего методом filter выполняется фильтрация с отбором элементов, имеющих идентификатор 'id1'. После этого методом css определяется курсивный стиль шрифта для выбранного элемента.

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


<script>
    // Изменить стиль текста элемента с id="id1"
    $('div')
        .filter(
            function(index){ 
                return $(this).is('#id1');
            })
        .css('font-style', 'italic');
</script>

В данном примере фильтр вызывает анонимную функцию для каждого выбранного элемента ('div') из набора; для этого в теле функции используется селектор $(this). После этого проверяется идентификатор элемента .is('#id1'). Если проверка отрицательна, то функция возвращает FALSE и элемент удаляется из набора. В противном случае, функция возвращает TRUE, сохраняя в наборе элемент, у которого изменяется стиль методом css.

Чтобы изменить стиль второй строки необходимо использовать метод hasClass, как это представлено в следующем листинге :


<script>
    // Изменить стиль текста  элементов с class="id1"
    $('div')
        .filter(
            function(index){ 
                return $(this).hasClass('id1');
            })
        .css('font-style', 'italic');
</script>

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

Таким образом, метод filter выполняет дополнительную фильтрацию элементов выбранного набора. Кроме этого, filter может получать в качестве параметра как простое значение, так и функцию.

Метод поиска элементов, find

Метод поиска find позволяет выбрать из набора дочерние элементы по определенному критерию. К примеру, WEB-страница содержит несколько абзцев (параграфов <p>), внутри которых могут присутствовать выделенные (emphasized <em>) слова. Для извлечения из набора только выделенных элементов Вы можете использовать следующий селектор :


alert ('Страница содержит ' + jQuery('p').find('em').length
                            + ' выделенных слов');

Приведенный в примере селектор может быть представлен выражением, в котором функция jQuery получает два параметра : первый параметр играет роль фильтра набора, формируемого вторым параметром :


alert ('Страница содержит ' + jQuery('em', $'p').length
                            + ' выделенных слов');

Селекторы в двух последних примерах можно представить следющим образом :


alert ('Страница содержит ' + jQuery('p em').length
                            + ' выделенных слов');

Отличие filter от find

Представленные выше примеры использования методов filter и find() демострируют фильтрацию DOM-элементов в наборе. В чем их отличие? Метод filter() выполняет фильтрацию в самом наборе, а метод find() выбирает дочерние элементы записей набора.

Чтобы не было путаницы, попробуем разобраться с этим вопросом на примере. Допустим страница имеет следующий код :

<body>
  <h3>Пример jQuery</h3>
  <div id="id1">Полный текст <em>первого</em> абзаца</div>
  <div class="id1">Полный текст <em>второго</em> абзаца</div>
</body>

Чтобы выбрать все DOM элементы <div> с определенным идентификатором необходимо использовать метод filter. А вот для того, чтобы выбрать дочерние элементы <em> в наборах необходимо использовать метод find().

Возвращение к предыдущему набору, метод end()

Методы filter и find() изменяют набор выделенных DOM элементов. Библиотека jQuery включает метод .end(), который позволяет вернуться к набору элементов, полученного до «фильтрации», но не изменяющемуся конечный набор. Давайте разберемся с этим «положением» по-подробнее. Для этого рассмотрим следующий код WEB-страницы :

<html>
  <head>
    <meta http-equiv="Content-Type" 
          content="text/html; charset=UTF-8" />
    <script type="text/JavaScript" src="..."></script>
  </head>
  <body>
    <h3>Пример jQuery</h3>

    <p>Верхняя строка</p>
    <p class="middle"><em>Средняя</em> строка</p>
    <p><em>Нижняя</em> строка</p>

    <script type="text/JavaScript">
      alert($('p').filter('.middle').length); // alert 1
      alert($('p').filter('.middle')
                  .end().length);             // alert 3 
      alert($('p').filter('.middle')
                  .find('em').end().length);  // alert 1
      alert($('p').find('em').length);        // alert 2
      alert($('p').find('em').end().length);  // alert 3
      alert($('p').end().length);             // alert 0
    </script>
  </body>
</html>

Данная WEB-страница в браузере будет представлена в виде заголовка и трех абзацев/параграфов (<p>). При этом, вторая строка обозначена классом class="middle". Кроме этого, вторая и третья строка имеют выделения <em>.

Рассмотрим скриптовый блок с выводом 6 сообщений (alert) :

первое сообщение отобразит '1' абзац <p>, имеющий class="middle";
второе сообщение отобразит '3' абзаца <p>, поскольку метод .end() «откатит» результат фильтрации;
в третьем сообщении метод .end() «откатит» результат поиска .find('em') и также отобразит '1' абзац, как первое сообщение;
четвертое сообщение отобразит '2' выделения дочерних DOM-элементов <em>, содержащихся в абзацах;
в пятом сообщении метод .end() «откатит» результат поиска .find('em') и отобразит '3' абзаца, как второе сообщение;
в шестом сообщении метод .end() «откатит» результат выбора $('p') и отобразит '0' элементов.

Метод .end() «откатывает» результат последнего преобразования выбранного набора DOM-элементов, полученного в результате применения следующих методов add(), andSelf(), children(), closes(),filter(), find(), map(), next(), nextAll(), not(), parent(), parents(), prev(),prevAll(), siblings(), slice(), clone(), appendTo(), prependTo(), insertBefore(),insertAfter(), and replaceAll(). В случае, если набор DOM-элементов не был модифицирован после выполнения функции jQuery, то метод .end() «обнулит» набор.

Включение родительского элемента, andSelf

Рассмотренные выше методы filter и find касались формирования нового набора из выбранных DOM-элементов, полученных функцией jQuery. Метод andSelf() позволяет включить в набор родительский элемент. Рассмотрим код следующей WEB-страницы :

<body>
  <div>
    <h3>Пример jQuery</h3>
    <div>
        <p id='id1'>Paragraph id='id1'</p>
        <p id='id2'>Paragraph id='id2'</p>
    </div>
  <script type="text/javascript">
      $('div').find('p:#id1').css('font-style','italic');
      $('div').find('p')
              .andSelf().css('border','1px solid #993300');
  </script>
</body>

Страница включает две строки (два абзаца) с идентификаторами id1 и id2. Блок <script> включает два скрипта :

первым скриптом выбирается строка с идентификатором id1 методом .find('p:#id1'), у которой изменяется стиль методом .css();
вторым скриптом выбираются дочерние абзацы блока <div>, методом .andSelf() в набор DOM-элементов включается также родительский элемент <div>, и у всех элементов меняется стиль представлением рамки вокруг элемента.

На следующем скриншоте представлена созданная WEB-страница.

Таким образом, метод .andSelf() включает в набор «родительский» элемент, но не его потомков.

Методы перебора элементов в наборе

Библиотека jQuery позволяет перемещаться по набору выделенных элементов и формировать новый набор на основе предыдущего. Рассмотрим следующий пример :


<div>
   <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
   </ul>
</div>

Страница включает список ссылок из 4-х элементов. Выделим вторую ссылку из списка :


jQuery('li:eq(1)');

После выделения второй ссылки можно переместиться вперед/назад, формируя новый набор элементов :


jQuery('li:eq(1)').next()   // выделение 3-го элемента <li>

jQuery('li:eq(1)').prev()   // выделение 1-го элемента <li>

jQuery('li:eq(1)').parent() // выделение 1-го <ul>

jQuery('li:eq(1)').parent()
                .children() // выделение всех <li>

jQuery('li:eq(1)').nextAll  // выделение всех <li> после 3-го

jQuery('li:eq(1)').prevAll() // выделение всех <li> до 2-го

Помните, что представленные методы формируют новый набор выделенных элементов. Чтобы вернуться к предыдущему набору можно использовать метод .end().

Примеры фильтров jQuery

В таблице представлены примеры выборки элементов с фильтрацией. Поскольку сам селектор является «тяжеловесным» методом выбора элементов, то рекомендуется «не грузить» его дополнительной фильтрацией, а использовать отдельный метод фильтрации.

Селектор	Пример	Описание
Простые фильтры
element:focus	$("input:focus") $("input[type='text']:focus")	элемент в фокусе : выбор элемента, находящийся в фокусе – выбор input-элемента, находящегся в фокусе – выбор текстового поля ввода, находящегся в фокусе
element:first	$("div:first") $(".box:first") $("div[title]:first") $(".box").filter(":first")	первый элемент набора : выбор первого элемента из набора селектора; эквивалент :eq(0); – выбор первого div-элемента на странице; – выбор первого элемента с классом box; – выбор первого div-элемента, содержащего атрибут title; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
element:last	$("div:last") $(".box:last") $("div[title]:last") $(".box").filter(":last")	последний элемент набора : выбор последнего элемента из набора селектора; – выбор последнего div-элемента на странице; – выбор последнего элемента с классом box; – выбор последнего div-элемента, содержащего атрибут title; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:eq(idx)	$("div:eq(0)") $("div:eq(-1)") $("div p:eq(1)") $("div p.box:eq(1)") $("box").eq(index);	элемент по индексу : выбор элемента из набора с порядковым номером idx; нумерация элементов с 0; – выбор первого div-элемента; – выбор последнего div-элемента (работает с jQuery-1.8); -1 — последний элемент, -2 — предпоследний элемент; – выбор второго абзаца (p) внутри div-элемента; – выбор второго абзаца (p) с классом box внутри div-элемента; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:not(element)	$("div:not(.box)") $("div:not(#name)")	исключение из найденных элементов : из выбранного набора элементов исключаются элементы, удовлетворяющие селектору element; – выбор всех div-элементов за исключением тех, которые имеют класс box; – выбор всех div-элементов за исключением тех, которые имеют идентификатор name.
:even	$(".box:even") $(".box").filter(":even")	четные элементы набора : из выбранного набора элементов исключаются нечетные элементы; – выбор всех четных элементов с классом box; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:odd	$(".box:odd") $(".box").filter(":odd")	нечетные элементы набора : из выбранного набора элементов исключаются четные элементы; – выбор всех нечетных элементов с классом box; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:gt(idx)	$(".box:gt(3)") $(".box:gt(-3)") $(".box).slice(3)")	элементы с индексом больше idx : из набора элементов выбираются элементы с индексом больше idx; – выбор всех элементов с классом box, начиная с 5; – выбор двух последних элементов с классом box; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:lt(idx)	$(".box:lt(3)") $(".box:lt(-3)") $(".box).slice(0, 3)")	элементы с индексом до idx : из набора элементов выбираются элементы с индексом меньше idx; – выбор первых четырех элементов с классом box; – выбор всех элементов с классом box кроме последних двух; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:header	$(".head:header") $(".head :header") $(".head").filter(":header")	элементы-заголовки : выбор элементов, которые являются заголовками (h1, h2, ...); – выбор всех элементов класса head, которые являются заголовками; – выбор всех элементов-заголовков, находящиеся внутри элементов класса head; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:animated	$(".box:animated") $("div.box:animated") $("div.box").filter(":animated")	анимированные элементы : выбор элементов, которые в данный момент участвуют в анимации; – выбор всех элементов класса box, которые в данный момент участвуют в анимации; – выбор всех div-элементов класса box, которые в данный момент участвуют в анимации; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:hidden	$(".box:hidden") $(".box :hidden") $(".box").filter(":hidden")	невидимые элементы набора : выбор всех скрытых элементов; – выбор всех скрытых элементов класса box; – выбор всех скрытых элементов, расположенных внутри элементов класса box; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:visible	$(".box:visible") $(".box :visible") $(".box").filter(":visible")	видимые элементы набора : выбор всех видимых элементов; – выбор всех видимых элементов класса box; – выбор всех видимых элементов, расположенных внутри элементов класса box; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
Фильтры по содержимому элементов
:contains(text)	$('div:contains('Иванов')")	селектор по тексту элемента : выбор элементов, включая дочерние, которые содержат строку text (чувствителен к регистру); – выбор всех div-элементов), внутри которых найдется строка Иванов.
:empty	$("td:empty")	селектор отсутствия содержимого : выбор элементов, которые не содержат текста и дочерних элементов; – выбор пустых ячеек таблицы; Селектор :empty является инверсией :parent.
:has(selector)	$("div:has(span)") $("#content div:has(span)") $("#desk").has("#span")	селектор наличия дочерних элементов : выбор элементов, которые имеют удовлетворяющие селектору selector дочерние элементы; – выбор div-элементов, внутри которых есть элементы с тегом span; – выбор находящихся внутри элемента с идентификатором content div-элементов, внутри которых есть элементы с тегом span; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:parent	$("div:parent") $("div").filter(":parent")	селектор наличия содержимого : выбор непустых элементов (наличие пробела считается наличием содержимого); – выбор непустых div-элементов; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
Фильтры дочерних элементов
:first-child	$("div:first-child") $("div.box:first-child") $("div").filter(":first-child")	первые элементы родителей : выбор первых элементов родителей; – выбор всех div-элементов, которые являются первыми у родителей; – выбор всех div-элементов класса box, которые являются первыми у родителей; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:last-child	$("div:last-child") $("div.box:last-child") $("div").filter(":last-child")	последние элементы родителей : выбор последних элементов родителей; – выбор всех div-элементов, которые являются последними у родителей; – выбор всех div-элементов класса box, которые являются последними у родителей; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:first-of-type	$("span:first-of-type")	первые элементы родителей : выбор первых элементов родителей; – выбор первых span-элементов родителей.
:last-of-type	$("span:last-of-type")	последние элементы родителей : выбор последних элементов родителей; – выбор последних span-элементов родителей.
:only-child	$("span:only-child") $("span").filter(":only-child")	единственные элементы родителей : выбор элементов, являющхся единственным у родителя; – выбор всех span-элементов, которые являются единственными прямыми потомками своих родителей; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:only-of-type	$("div:only-of-type") $("div").filter(":only-of-type")	единственные элементы родителей : выбор элементов, являющхся единственным у родителей; – выбор всех div-элементов, у которых среди соседей нет div'ов; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:nth-child(arg :nth-child-last(arg)	$("div:nth-child(3)") $("div:nth-child(odd)") $("div:nth-child(even)") $("div:nth-child(2n+3)")	определенные условные элементы родителей : выбор определенных элементов родителей; nth-child-last определяет позиции элементов в обратном порядке, т.е. с конца набора – выбор каждого третьего div-элемента родителя; – выбор каждого нечетного div-элемента родителя; – выбор каждого четного div-элемента родителя; – выбор каждого 2n+3-й div-элемента (5, 7, 9...) родителя; параметр arg может принимать следующие значения : • index — элементы на позиции index; • even — элементы на четных позициях; • odd — элементы на нечетных позициях; • equation — выражение, описывающее позицию элемента и зависящее от n, например 2n+1 соответствует элементам с позициями 1, 3, 5 (вместо n подставляются значения 0,1,2, ...).
:nth-of-type(arg) :nth-last-of-type(arg)	$("div:nth-of-type(3)") $("div:nth-of-type(odd)") $("div:nth-of-type(even)") $("div:nth-of-type(2n+3)")	определенные условные элементы родителей : выбор определенных элементов родителей; nth-last-of-type определяет позиции элементов в обратном порядке, т.е. с конца набора – выбор каждого третьего div-элемента родителя; – выбор каждого нечетного div-элемента родителя; – выбор каждого четного div-элемента родителя; – выбор каждого 2n+3-й div-элемента (5, 7, 9...) родителя; параметр arg может принимать следующие значения : • index — элементы на позиции index; • even — элементы на четных позициях; • odd — элементы на нечетных позициях; • equation — выражение, описывающее позицию элемента и зависящее от n, например 3n+2 соответствует элементам с позициями 2, 5, 8 (вместо n подставляются значения 0,1,2, ...).
Фильтры элементов форм
:button	$(".form :button") $(".formBox").filter(":button")	кнопки : выбор элементов кнопок (input-элементы с типом button или button-элементы); – выбор кнопок, расположенных внутри элемента с классом form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:radio	$(".form input:radio") $("input").filter(":radio")	радио-кнопки : выбор радио-кнопок (input-элементы с типом radio); – выбор радио-кнопок, расположенных внутри элемента с классом form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:checkbox	$(".form input:checkbox") $("input").filter(":checkbox")	флажки : выбор флажков (input-элементы с типом checkbox); – выбор флажков, расположенных внутри элемента с классом form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:text	$(".form input:text") $("input").filter(":text")	текстовые поля : выбор текстовых полей (input-элементы с типом text); – выбор текстовых полей, расположенных внутри элемента с классом form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:password	$(".form input:password") $("input").filter(":password")	поля ввода пароля : выбор полей ввода пароля (input-элементы с типом password); – выбор полей ввода пароля, расположенных внутри элемента с классом form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:file	$("form input:file") $("form input").filter(":file")	поля загрузки файлов : выбор полей загрузки файлов (input-элементы с типом file); – выбор полей загрузки файлов, расположенных внутри элемента form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:submit	$("form :submit") $("form input").filter(":submit")	кнопки submit : выбор submit-кнопок, отправляющих данные формы на сервер; – выбор кнопок submit, расположенных внутри элемента form (элементы input и button с типом submit); – выбор input-элементов с типом submit, расположенных внутри элемента form.
:reset	$("form input:reset") $("form input").filter(":reset")	кнопки очистки формы : выбор reset-кнопок очистки форм (input-элементы с типом reset); – выбор кнопок reset, расположенных внутри элемента form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:image	$("input:image") $("form [type='image']")	изображения отправки данных формы : выбор изображений, отправляющих данные формы (input-элементы с типом image); – выбор input-элементов с типом image – для улучшения производительности искать image-элементы формы лучше с использованием атрибута [type="image"].
:input	$("form input") $("form").filter(":input")	элементы формы : выбор элементов типа input, textarea, select или button; – выбор input-элементов, расположенных внутри элемента form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:selected	$(".form option:selected") $(".form").filter(":selected")	выделенные элементы : выбор элементов со статусом selected (элементы типа <option>); – выбор элементов внутри select-элемента с классом form; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:focus	$("input:focus")	элемент в фокусе : выбор элемента формы, находящегося в фокусе; – выбор input-элемента формы, находящегося в фокусе.
:checked	$("form input:checked") $("input[type=checkbox]")	выбранные элементы : список элементов типа checkbox (флажки), radio (переключатели) или select (списочных элементов), которые выделены на странице; – список выбранных input-элементов формы (input [type=radio, type=checkbox]; – список выбранных input-элементов типа type=checkbox.
:enabled	$("form input:enabled") $("form input").filter(":enabled")	незаблокированные элементы : выбор незаблокированных пользователем элементов; – выбор незаблокированных пользователем input-элементов; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.
:disabled	$("form input:disabled") $("form input").filter(":disabled")	заблокированные элементы : выбор заблокированных пользователем элементов; – выбор заблокированных пользователем input-элементов; – для улучшения производительности рекомендуется отделить метод фильтрации от селектора.

Связанные страницы

Описание библиотеки jQuery
Описание селектора jQuery, выбор элементов DOM
CSS в сочетании с jQuery
Действия и обработчики событий jQuery