发布在：使用 jQuery Core

遍历

使用 jQuery 做了初始选择后，你可以深入到刚刚选择的内容中。遍历可以分解为三个基本部分：父级、子级和同级。jQuery 为所有这些部分提供了大量易于使用的函数。请注意，这些函数中的每一个都可以选择性地传递字符串选择器，有些还可以采用另一个 jQuery 对象来过滤你的选择。请注意并参考关于遍历的 API 文档，以了解你可以使用的参数变化。

链接 父级

从选择中查找父级的函数包括 .parent()、.parents()、.parentsUntil() 和 .closest()。

1
2
3
4
5
6
7
8
9
 
<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
// Selecting an element's direct parent:
 
// returns [ div.child ]
$( "span.subchild" ).parent();
 
// Selecting all the parents of an element that match a given selector:
 
// returns [ div.parent ]
$( "span.subchild" ).parents( "div.parent" );
 
// returns [ div.child, div.parent, div.grandparent ]
$( "span.subchild" ).parents();
 
// Selecting all the parents of an element up to, but *not including* the selector:
 
// returns [ div.child, div.parent ]
$( "span.subchild" ).parentsUntil( "div.grandparent" );
 
// Selecting the closest parent, note that only one parent will be selected
// and that the initial element itself is included in the search:
 
// returns [ div.child ]
$( "span.subchild" ).closest( "div" );
 
// returns [ div.child ] as the selector is also included in the search:
$( "div.child" ).closest( "div" );

链接 子级

从选择中查找子元素的函数包括 .children() 和 .find()。这些函数之间的区别在于选择在子结构中的深度。.children() 仅对直接子节点进行操作，而 .find() 可以递归地遍历子节点、子节点的子节点，依此类推。

1
2
3
4
5
6
7
8
9
 
// Selecting an element's direct children:
 
// returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).children( "div" );
 
// Finding all elements within a selection that match the selector:
 
// returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).find( "div" );

链接 同级

jQuery 中的其余遍历函数都与查找同级选择有关。就遍历方向而言，有一些基本函数。你可以使用 .prev() 查找前一个元素，使用 .next() 查找下一个元素，使用 .siblings() 同时查找前一个和下一个元素。还有一些其他函数基于这些基本函数构建：.nextAll()、.nextUntil()、.prevAll() 和 .prevUntil()。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
// Selecting a next sibling of the selectors:
 
// returns [ div.surrogateParent1 ]
$( "div.parent" ).next();
 
// Selecting a prev sibling of the selectors:
 
// returns [] as No sibling exists before div.parent
$( "div.parent" ).prev();
 
// Selecting all the next siblings of the selector:
 
// returns [ div.surrogateParent1, div.surrogateParent2 ]
$( "div.parent" ).nextAll();
 
// returns [ div.surrogateParent1 ]
$( "div.parent" ).nextAll().first();
 
// returns [ div.surrogateParent2 ]
$( "div.parent" ).nextAll().last();
 
// Selecting all the previous siblings of the selector:
 
// returns [ div.surrogateParent1, div.parent ]
$( "div.surrogateParent2" ).prevAll();
 
// returns [ div.surrogateParent1 ]
$( "div.surrogateParent2" ).prevAll().first();
 
// returns [ div.parent ]
$( "div.surrogateParent2" ).prevAll().last();

使用 .siblings() 选择所有同级

1
2
3
4
5
6
7
 
// Selecting an element's siblings in both directions that matches the given selector:
 
// returns [ div.surrogateParent1, div.surrogateParent2 ]
$( "div.parent" ).siblings();
 
// returns [ div.parent, div.surrogateParent2 ]
$( "div.surrogateParent1" ).siblings();

请参阅 api.jquery.com 上的遍历文档，了解这些函数及更多函数的完整文档。

在文档中进行长距离遍历时要小心——复杂的遍历要求文档的结构保持不变，即使您是创建从服务器到客户端的整个应用程序的人，也很难保证这一点。一到两步的遍历很好，但最好避免从一个容器到另一个容器的遍历。