JQuery find()实例讲解

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());   }); }); 

解释：

1. 首先通过#parent选择器选中父元素，然后使用find(“.child”)方法查找所有类名为"child"的后代元素。这里返回一个包含2个子元素的JQuery对象。
2. 然后使用find(“.grandchild”)方法在子元素中查找所有类名为"grandchild"的后代元素。这里返回一个包含2个孙元素的JQuery对象。
3. 使用each()方法对每个孙元素进行迭代，并使用text()方法获取其文本内容并输出到控制台。

输出结果：

2 2 Hello World 

注意：find()方法只会查找后代元素，不包括自身。如果要查找自身及后代元素，应该使用find()方法之前先添加自身元素到JQuery对象中，例如$("#parent").addBack().find(".child")。