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();
    
    小范围少次数的遍历是比较合适的,应该尽量避免遍历跨越大片的文档或者从一个容器到另一个容器。
posted @ 2013-09-04 08:50  M守护神  阅读(495)  评论(0编辑  收藏  举报