温馨提示×

JQuery find()实例讲解

小亿
76
2023-12-19 01:57:58
栏目: 编程语言

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

0