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")。