jQuery获取所有父级元素及同级元素及子元素的方法(推荐)

简介

在 jQuery 中，我们可以使用 parents(), siblings() 和 find() 方法来获取元素的父级元素、同级元素和子元素。

parents() 方法

parents() 方法可以获取元素的所有父级元素，包括祖先元素。它还接受一个可选的筛选器参数，可以用来过滤所返回的元素集合。

// 获取 id 为 "child" 的元素所有父级元素中 class 为 "parent" 的元素
$("#child").parents(".parent");

siblings() 方法

siblings() 方法可以获取元素的所有同级元素。同样也可以接受一个可选筛选器参数，可以用来过滤所返回的元素集合。

// 获取 id 为 "example" 元素的所有同级元素
$("#example").siblings();

// 获取 id 为 "example" 元素的所有同级元素中 class 为 "sibling" 的元素
$("#example").siblings(".sibling");

find() 方法

find() 方法可以获取元素的所有子元素。同样也可以接受一个可选的筛选器参数，可以用来过滤所返回的元素集合。

// 获取 id 为 "parent" 的元素中所有 class 为 "child" 的元素
$("#parent").find(".child");

示例

<div class="parent">
  <div class="child">
    <div class="grandchild"></div>
  </div>
</div>

// 获取 class 为 "child" 元素的父级元素、同级元素和子元素
$(".child").parents().siblings().find("*");

上面的例子将返回如下元素集合：
- 父级元素：<div class="parent"></div>
- 同级元素：无
- 子元素：<div class="grandchild"></div>