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();

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