JQuery的find()方法用于查找匹配選擇器的所有后代元素。下面是一個find()方法的實例講解:
HTML代碼:
<div id="parent">
<div class="child">
<p class="grandchild">Hello</p>
</div>
<div class="child">
<p class="grandchild">World</p>
</div>
</div>
JQuery代碼:
$(document).ready(function(){
var $child = $("#parent").find(".child");
console.log($child.length); // 輸出:2
var $grandchild = $child.find(".grandchild");
console.log($grandchild.length); // 輸出:2
$grandchild.each(function() {
console.log($(this).text());
});
});
解釋:
#parent
選擇器選中父元素,然后使用find(“.child”)方法查找所有類名為"child"的后代元素。這里返回一個包含2個子元素的JQuery對象。輸出結果:
2
2
Hello
World
注意:find()方法只會查找后代元素,不包括自身。如果要查找自身及后代元素,應該使用find()方法之前先添加自身元素到JQuery對象中,例如$("#parent").addBack().find(".child")
。