Поиск элементов внутри выбранных

Материал из JQuery

Перейти к: навигация, поиск
.find()

Осуществляет поиск элементов внутри уже выбранных элементов. Метод имеет три вариант использования:

.find(selector):jQuery1.0

Ищет элементы, соответствующие заданному селектору, внутри выбранных элементов.

.find(jQuery object):jQuery1.6

Осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.

.find(element):jQuery1.6

Осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.

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

$("div").find("span") вернет все элементы span, находящиеся внутри div-элементов.
$("div").find(".bigBlock") вернет все элементы с классом bigBlock, находящиеся внутри div-элементов.
$("div").find( $(".bigBlock") ) вернет все элементы с классом bigBlock, находящиеся внутри div-элементов.

Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода .find(). Например, искать span-элементы, лежащие внутри div'ов правильнее так:

.find() же удобно использовать, когда некоторые элементы уже найдены, и вам необходимо осуществить поиск элементов внутри них:

Так же, .find() удобен для использования в цепочках методов:

Работа метода .find() схожа с .children(), который осуществляет поиск подходящих дочерних элементов. Отличие заключается в том, что .find() проводит поиск не только среди дочерних элементов, но и внутри них тоже (т.е. поиск проходит на всех вложенных уровнях иерархии DOM, в то время как .children() ищет только на одном уровне).

Исчерпывающий пример

Внутри каждого ul-элемента, найдем первый li-элемент и последний p-элемент:


Фильтрация элементов помощью find

Кроме поиска, .find() может осуществлять своеобразную фильтрацию. Например вот так можно отфильтровать span'ы, оставив только те, которые лежат внутри параграфов:


Ссылки

Поисковые ключи:
  • дочерние элементы
  • потомки
  • find()
  • .find()