jQuery中parents()方法用法实例

jQuery中parents()方法用法实例

jQuery中的parents()方法可以用来获取一个元素的所有父元素。

语法

$(selector).parents(filter)

selector：必须，表示要查找的元素。

filter：可选，表示要过滤的元素。

实例说明

示例一

下面的HTML代码中包含了多个层级的div元素：

<div class="grandparent">
  <div class="parent1">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="parent2">
    <div class="child3"></div>
    <div class="child4"></div>
  </div>
</div>

现在，我们要获取child4元素的所有父元素，可以使用以下代码：

$('.child4').parents().each(function() {
    console.log($(this).attr('class'));
});

输出结果如下：

parent2
grandparent

上面的代码中，我们首先使用.child4选择器选中了child4元素，然后使用.parents()方法获取了它的所有父元素，最后遍历这些父元素并打印它们的class属性值。

示例二

下面的HTML代码中包含了多个层级的div元素，并且有两个div元素拥有相同的class值：

<div class="grandparent">
  <div class="parent1">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="parent2">
    <div class="child3"></div>
    <div class="child4"></div>
  </div>
  <div class="parent2">
    <div class="child5"></div>
    <div class="child6"></div>
  </div>
</div>

现在，我们只想获取child4元素的第一个父元素，则可以使用以下代码：

$('.child4').parents('.parent2:first').each(function() {
    console.log($(this).attr('class'));
});

输出结果为：

parent2

上面的代码中，我们添加了.parent2:first作为.parents()方法的参数，这样就只获取了child4元素的第一个父元素，而不是所有的父元素。