.find()
Осуществляет поиск элементов внутри уже выбранных элементов. Метод имеет три вариант использования:
Осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.
Осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.
Примеры использования:
| $("div").find("span")
| вернет все элементы span, находящиеся внутри div-элементов.
|
| $("div").find(".bigBlock")
| вернет все элементы с классом bigBlock, находящиеся внутри div-элементов.
|
| $("div").find( $(".bigBlock") )
| вернет все элементы с классом bigBlock, находящиеся внутри div-элементов.
|
Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода .find(). Например, искать span-элементы, лежащие внутри div'ов правильнее так:
$('div span')
.find() же удобно использовать, когда некоторые элементы уже найдены, и вам необходимо осуществить поиск элементов внутри них:
// найдем все ul-элементы на странице
var $ulElements = $('ul');
// ----- какой то код ... -----
// найдем li-элементы с классом userBox, внутри $ulElements
$ulElements.find('li.userBox');
Так же, .find() удобен для использования в цепочках методов:
$('ul') // найдем все ul-элементы на странице
.addClass('listElements') // добавим ul'ам класс listElements
.find('li.userBox') // найдем li-элементы с классом userBox, внутри ul'ов
.remove(); // и удалим их
Работа метода .find() схожа с .children(), который осуществляет поиск подходящих дочерних элементов. Отличие заключается в том, что .find() проводит поиск не только среди дочерних элементов, но и внутри них тоже (т.е. поиск проходит на всех вложенных уровнях иерархии DOM, в то время как .children() ищет только на одном уровне).
Исчерпывающий пример
Внутри каждого ul-элемента, найдем первый li-элемент и последний p-элемент:
~lt~!DOCTYPE~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
~lt~style~gt~
body{font:10pt Arial,sans-serif; color:#555}
ul{float:left; margin:3px; margin-left:15px;
padding:10px 10px 5px 10px; border:2px solid #ddd}
ul.matched{background:url('/tags/images/matched.png') 0% 2% no-repeat;}
ul.result{position:relative; left:-3px; border:3px solid #ff8888;}
li{position:relative; float:left; margin:7px;
padding:2px; width:60px; height:60px;
background-color:#e1e1e1; border:2px solid #e1e1e1}
li.matched{background:#e1e1e1 url('/tags/images/matched.png') 5% 5% no-repeat}
li.result{width:60px; height:60px; border:3px solid #ff8888;}
p{position:relative; float:left; width:16px; height:16px;
margin:2px; background-color:#f4f4f4; font-size:1pt}
p.matched{background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat}
p.result{width:12px; height:12px; border:2px solid #ff8888;}
.matched_addit{background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat}
.srce{padding:16px 0; text-align:center;} .srce tt{color:#0088ff}
.tgName{position:absolute; top:11px; left:45%; font-size:8pt; color:#b2ada1}
li .tgName{top:24px; left:18px;} li p .tgName{top:0; left:1px; font-size:7pt;}
.clear{clear:both}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~
~lt~ul~gt~
~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~li~gt~
~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~div class="clear" /~gt~
~lt~/ul~gt~
~lt~ul~gt~
~lt~li~gt~~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~li~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~/li~gt~
~lt~li~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~/li~gt~
~lt~div class="clear" /~gt~
~lt~/ul~gt~
~lt~ul~gt~
~lt~li~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~li~gt~~lt~/li~gt~
~lt~div class="clear" /~gt~
~lt~/ul~gt~
~lt~div class="clear srce"~gt~
ключевой код: ~lt~tt~gt~$("ul").find("li:first, p:last")~lt~/tt~gt~
~lt~/div~gt~
~lt~div class="clear"~gt~~lt~p class="matched_addit"~gt~~lt~/p~gt~ – выбранные элементы.~lt~/div~gt~
~lt~div class="clear"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – результат работы find().~lt~/div~gt~
~lt~script~gt~
// найдем и сохраним все ul-элементы
var $matched = $('ul');
// выделим их
$matched
.addClass('matched');
// найдем внутри уже выбранных элементов все требуемые
// и выделим их добавив класс result
$matched.find("li:first, p:last")
.addClass("result");
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Фильтрация элементов помощью find
Кроме поиска, .find() может осуществлять своеобразную фильтрацию. Например вот так можно отфильтровать span'ы, оставив только те, которые лежат внутри параграфов:
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~style~gt~
body { font: 10pt sans-serif }
span { color: blue; }
~lt~/style~gt~
~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~p~gt~— Ты меня не помнишь? мы ~lt~span~gt~познакомились~lt~/span~gt~ на вечеринке у Джули.~lt~/p~gt~
~lt~p~gt~— Да, ты ~lt~span~gt~гнал про Пакмена~lt~/span~gt~.~lt~/p~gt~
~lt~div~gt~— Нет, совсем не я. То был какой-то ~lt~span~gt~дурак~lt~/span~gt~… Я другой дурак.~lt~/div~gt~
~lt~br/~gt~(Скотт Пилигрим против всех)
~lt~script~gt~
var $spans = $('span');
$("p").find( $spans ).css('color','red');
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Ссылки