jquery学习手记（8）遍历

层次的级别有：parent/children/sibling。

父节点

父节点遍历方法有：$.fn.parent(), $.fn.parents(), $.fn.parentsUntil(), and $.fn.closest().示例如下：

<div class="grandparent">    <div class="parent">        <div class="child">            <span class="subchild"></span>        </div>    </div>    <div class="surrogateParent1"></div>    <div class="surrogateParent2"></div></div>

 

// 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");

子节点

子节点的遍历方法有：$.fn.children() and $.fn.find()。

$.fn.children()只找直接子节点，$.fn.find()迭代遍历所有的子节点。示例如下：

// 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"); 

兄弟节点

遍历兄弟节点的基本方法有：$.fn.prev()；$.fn.next()；$.fn.siblings()；$.fn.nextAll()；.fn.nextUntil(), $.fn.prevAll() and $.fn.prevUntil().

示例如下：

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

$.fn.siblings()选择所有的兄弟节点：

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