層次的級(jí)別有：parent/children/sibling。

父節(jié)點(diǎn)

父節(jié)點(diǎn)遍歷方法有：$.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");

子節(jié)點(diǎn)

子節(jié)點(diǎn)的遍歷方法有：$.fn.children() and $.fn.find()。

$.fn.children()只找直接子節(jié)點(diǎn)，$.fn.find()迭代遍歷所有的子節(jié)點(diǎn)。示例如下：

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

兄弟節(jié)點(diǎn)

遍歷兄弟節(jié)點(diǎn)的基本方法有：$.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()選擇所有的兄弟節(jié)點(diǎn)：

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

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/davidwang456/archive/2013/04/18/3029720.html

總結(jié)

以上是生活随笔為你收集整理的jquery学习手记（8）遍历的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。