发布于：使用 jQuery 核心

遍历

一旦你使用 jQuery 完成了初始选择，你就可以深入到刚刚选择的内容中进行遍历。遍历可以分为三个基本部分：父元素、子元素和兄弟元素。jQuery 为所有这些部分提供了大量易于使用的方法。请注意，每个方法都可以选择性地传入字符串选择器，有些还可以接受另一个 jQuery 对象来过滤你的选择。请注意并参考API 文档中的遍历部分，以了解你可以使用的参数变体。

link 父元素

用于从选择中查找父元素的方法包括 .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" );

link 子元素

用于从选择中查找子元素的方法包括 .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" );

link 兄弟元素

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 上的遍历文档中查看这些方法及更多方法的完整文档。

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