JQuery官方学习资料（译）：遍历

    一旦你通过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();

    

    小范围少次数的遍历是比较合适的，应该尽量避免遍历跨越大片的文档或者从一个容器到另一个容器。