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

解释：

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

输出结果：

22HelloWorld

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