jQuery итерация - метод find()

Руководство по遍ванию jQuery

Пример

Поиск всех后代 span элементов в всех абзацах и изменение их цвета на красный:

$("p").find("span").css('color','red');

Попробуйте сами

Определение и использование

Метод find() для каждого элемента в текущем наборе элементов получает потомков, фильтруя их с помощью селектора, jQuery объекта или элемента.

Синтаксис

.find(selector)
Параметр Описание
selector Строковое значение, содержащее селектор выражение для соответствия текущему набору элементов.

Подробное описание

Если передан jQuery объект, представляющий набор элементов DOM, метод .find() позволяет нам искать эти элементы среди их потомков в дереве DOM и создавать новый jQuery объект из соответствующих элементов. .find() ähnlich .children() методу, только последний遍ствует только по одному уровню вниз по дереву DOM.

.find() метод имеет очевидную особенность: его селектор выражение совпадает с типом выражения, которое мы передаем функции $(). Оно фильтрует элементы, проверяя, соответствуют ли они выражению.

Пожалуйста, подумайте о следующем простом вложенном списке:

<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, чтобы найти в нем элементы списка:

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

Попробуйте сами

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

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

Выборщик контекста реализован методом .find(); поэтому $('li.item-ii').find('li') эквивалентно $('li', 'li.item-ii').

Для jQuery 1.6 мы также можем использовать заданный jQuery-сборник или элемент для фильтрации. Вновь рассмотрим вложенный список, и сначала напишем так:

var $allListElements = $('li');

Затем передайте этот jQuery-объект методу find:

$('li.item-ii').find( $allListElements );

Попробуйте сами

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

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

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

Попробуйте сами

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

Руководство по遍ванию jQuery