.find()


.find( selector )Возвращает: jQuery

Описание: Поиск потомков внутри каждого элемента в текущем наборе соотвествующих элементов с фильтрацией по селектору, объекту jQuery или элементу.

  • Добавлен в версии: 1.0.find( selector )

    • selector
      Тип: Selector
      Строка содержащая выражение селектора для получения соответсвующих элементов.
  • Добавлен в версии: 1.6.find( element )

    • element
      Тип: Element или jQuery
      Элемент или объект jQuery внутри которого будет производится поиск элементов.

Учитывая что объект jQuery представляет из себя набор DOM элементов, метод .find() разрешает нам находить потомки элементов в DOM дереве и конструировать новый объект jQuery из найденных элементов. Методы .find() и .children() похожи, за исключением того, что последний проходит вниз по DOM дереву только на один уровень.

Первая сигнатура метода .find() принимает выражение селектора того же типа что и функция $(). Элементы будут фильтроваться путем проверки - соответстует ли данный элементы селектору.

Рассмотрим страницу на которой расположены вложенные списки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>

Если мы начнем с пункта II, мы можем найти элементы списка внутри него:

1
$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );

Результатом работы этого кода станет красный фон для элементов A, B, 1, 2, 3 и C. Даже если элемент II соответствует выражению селектора, он не включается в результаты, так как только потомки считаются кандидатами на соответствие.

В отличие от большинства методов обхода, метод .find() требует обязательного выражения селектора. Если нам нужны все потомки, то мы можем указать универсальный селектор '*' для этого.

Контекст селектора реализованн в методе .find(), следовательно, $( "li.item-ii" ).find( "li" ) эквивалентно $( "li", "li.item-ii" ).

Начиная с jQuery 1.6, вы также можете фильтровать выбор при помощи переданного объекта jQuery или элемента. С тем же списком описанным выше, если мы начнем с:

1
var allListElements = $( "li" );

И затем передадим этот jQuery объект в find:

1
$( "li.item-ii" ).find( allListElements );

То это вернет jQuery коллекцию, которая содержит который содержит только элементы списка, являющиеся потомками элемента II.

Аналогично, фильтровать можно по элементу:

1
2
var item1 = $( "li.item-1" )[ 0 ];
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );

Результатом этого вызова будет красный фон у элемента 1.

Примеры использования