一旦你通过JQuery创建了选择器，你就可以对此进行更为深入的遍历。遍历可以分为三个基本组成部分，父节点、子节点和兄弟节点。JQuery为这些部分提供了许多丰富易用的方法。
<div class="grandparent">
<div class="parent">
<div class="child">
<span class="subchild"></span>
</div>
</div>
<div class="surrogateParent1"></div>
<div class="surrogateParent2"></div>
</div>
|
通过选择器来寻找父节点的方法有.parent()、.parents()、.parentsUntil()和 .closest()。
// 选择一个元素的父节点
// 返回 [ div.child ]
$( "span.subchild" ).parent();
// 选择匹配选择器元素的所有父节点
// 返回 [ div.parent ]
$( "span.subchild" ).parents( "div.parent" );
// 返回 [ div.child, div.parent, div.grandparent ]
$( "span.subchild" ).parents();
// 选择元素所有父节点，但是不包含指定选择器的元素
// 返回 [ div.child, div.parent ]
$( "span.subchild" ).parentsUntil( "div.grandparent" );
// 选择最近的父节点，需要注意的是仅仅会有一个父节点被选择，搜索的内容还包含了选择器本身
// 返回 [ div.child ]
$( "span.subchild" ).closest( "div" );
// 返回 [ div.child ] 选择器本身也包含在内
$( "div.child" ).closest( "div" );
|
通过选择器来寻找子节点的方法有.children()和.find()。两者的区别在于，.children()方法只能寻找直接子节点，而.find()方法可以遍历所有的子节点，包括子节点的子节点。
// 选择一个元素的直接子节点。
// 返回 [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).children( "div" );
// 寻找所有匹配选择器的元素
// 返回 [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).find( "div" );
|
JQuery提供了一些基本的通过选择器来寻找兄弟节点的方法，你可以使用.prev()方法寻找前一个节点，可以使用.next()方法寻找后一个节点，可以使用.siblings()方法寻找两边的节点。另外还有.nextAll()、.nextUntil()、.prevAll()和.prevUntil()等方法。
// 选择下一个兄弟节点
// 返回 [ div.surrogateParent1 ]
$( "div.parent" ).next();
// 选择前一个兄弟节点
// 返回 [] 这里div.parent不存在前一个兄弟节点
$( "div.parent" ).prev();
// 选择所有后面的兄弟节点
// 返回 [ div.surrogateParent1, div.surrogateParent2 ]
$( "div.parent" ).nextAll();
// 返回 [ div.surrogateParent1 ]
$( "div.parent" ).nextAll().first();
// 返回 [ div.surrogateParent2 ]
$( "div.parent" ).nextAll().last();
// 选择所有前面的兄弟节点
// 返回 [ div.surrogateParent1, div.parent ]
$( "div.surrogateParent2" ).prevAll();
// 返回 [ div.surrogateParent1 ]
$( "div.surrogateParent2" ).prevAll().first();
// 返回 [ div.parent ]
$( "div.surrogateParent2" ).prevAll().last();
|
使用.siblings()方法可以选择所有的兄弟节点。
// 选择所有的兄弟节点
// 返回 [ div.surrogateParent1, div.surrogateParent2 ]
$( "div.parent" ).siblings();
// 返回 [ div.parent, div.surrogateParent2 ]
$( "div.surrogateParent1" ).siblings();
|
小范围少次数的遍历是比较合适的，应该尽量避免遍历跨越大片的文档或者从一个容器到另一个容器。