Поиск элементов внутри выбранных
Материал из JQuery
Осуществляет поиск элементов внутри других элементов. Метод имеет три вариант использования:
Ищет элементы, соответствующие заданному селектору, внутри выбранных элементов.
Осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержаться в заданном объекте jQuery.
Осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.
Примеры использования:
| $("div").find("span") | вернет все элементы span, находящиеся внутри div-элементов. |
| $("div").find(".bigBlock") | вернет все элементы с классом bigBlock, находящиеся внутри div-элементов. |
| $("div").find( $(".bigBlock") ) | вернет все элементы с классом bigBlock, находящиеся внутри div-элементов. |
Работа метода .find() схожа с .children(), который осуществляет поиск подходящих дочерних элементов. Отличие заключается в том, что .find() проводит поиск не только среди дочерних элементах, но и внутри них тоже (т.е. поиск проходит на всех вложенных уровнях иерархии DOM, в то время как .children() ищет только на одном уровне).
Пример
Внутри каждого ul-элемента, найдем первый li-элемент и последний p-элемент:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
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}
</style>
</head>
<body>
<tt class="tgName">‹ul›</tt>
<ul class="matched">
<li><tt class="tgName">‹li›</tt></li>
<li></li>
<li>
<p><tt class="tgName">‹p›</tt></p> <p></p> <p></p>
<p></p> <p></p> <p></p>
<p></p> <p></p> <p></p>
</li>
<li></li>
<li></li>
<div class="clear" />
</ul>
<ul class="matched">
<li></li>
<li></li>
<li></li>
<li>
<p></p> <p></p> <p></p>
<p></p> <p></p> <p></p>
<p></p> <p></p> <p></p>
</li>
<li></li>
<div class="clear" />
</ul>
<ul class="matched">
<li>
<p></p> <p></p> <p></p>
<p></p> <p></p> <p></p>
<p></p> <p></p> <p></p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clear" />
</ul>
<div class="clear srce">
ключевой код: <tt>$("ul").find("li:first, p:last")</tt>
</div>
<div class="clear"><p class="matched_addit"></p> – выбранные элементы.</div>
<div class="clear"><p class="result"></p> – результат работы find().</div>
<script>
$("ul").find("li:first, p:last").addClass("result");
</script>
</body>
</html>
