遍歷樹 (jQuery 10)

官網連結
目前有以下14種：

.next()：取同輩的下一個
.prev()：取同輩的上一個
.nextAll()：取同輩的下一個到最後面
.prevAll()：取同輩的上一個到最前面
.siblings()：取自己同輩的，但不包括自己，也就是.nextAll()+prevAll()
.parent()：從上一層父輩到自己同輩的最後面全取
.parents()：從全部的父輩到自己同輩的最後面全取
.children()： 取自己的兒孫輩

.nextUntil()：有nextAll()的功能，而且多一個參數，可以更細的過濾
.prevUntil()：有prevAll()的功能，而且多一個參數，可以更細的過濾
.parentsUntil()：有parents()的功能，而且多一個參數，可以更細的過濾

.offsetParent()：整個樹的最上層
.find()：找下層的選擇器、元素
.closest()：很像parents()，但回傳的是0或1組

以下用.css( "background-color", "red" )來測

※HTML

<div class="a m">
    祖父母
    <div class="b n">
        父母
        <div class="c y">大兄<span>A</span></div>
        <p class="d">大姊<span>B</span></p>
        <div class="e">小兄<span>C</span></div>
        <div class="f">小姊<span>D</span></div>
        <div id="I">
            我
            <div class="g">
                我兒
                <span>孫子</span>
                <span>孫女</span>
            </div>
            <div class="h">
                我女
                <span>孫子</span>
                <span>孫女</span>
            </div>
        </div>
        <p class="i">大妹<span>a</span></p>
        <div class="j">大弟<span>b</span></div>
        <div class="k">小妹<span>c</span></div>
        <div class="l">小弟<span>d</span></div>
    </div>
</div>

※.prev()、.prevAll()、.next()、.nextAll()、.children()、.siblings()、.parent()、.parents()

※結果：
$('#I').prev()： 小姊D
$('#I').prevAll()： 大兄A、大姊B、小兄C、小姊D
$('#I').next()： 大妹a
$('#I').nextAll()： 大妹a、大弟b、小妹c、小弟d
$('#I').children()： 我兒、孫子、孫女、我女、孫子、孫女
$('#I').siblings()： 大兄A、大姊B、小兄C、小姊D、大妹a、大弟b、小妹c、小弟d
$('#I').parent()： 父母~小弟d
$('#I').parents()： 祖父母~小弟d

※這8個都可以加一個參數，放選擇器，如.children('#xxx')，以上面children的例子，結果的6個中，還要有id是xxx的才選取

※.nextUntil()、parentsUntil()、.prevUntil()：

※結果：
$('.g').parentsUntil()：等同parents()，所以是全部
$('.g').parentsUntil($('div.a'))：父母~小弟d
$('.g').parentsUntil($('div.b'))：我、我兒、孫子、孫女、我女、孫子、孫女
$('.g').parentsUntil($('div.b'), 'div')：我、我兒、孫子、孫女、我女、孫子、孫女

$('#I').nextUntil()：等同nextAll()，所以是大妹a、大弟b、小妹c、小弟d
$('#I').nextUntil($('div.k'))：大妹a、大弟b
$('#I').nextUntil($('div.k'), 'p')：大妹a

$('#I').prevUntil()：等同prevAll()，所以是大兄A、大姊B、小兄C、小姊D
$('#I').prevUntil($('div.c'))：大姊B、小兄C、小姊D
$('#I').prevUntil($('div.c'), 'div')：小兄C、小姊D

※.offsetParent()、.find()、.closest()

※結果：
$('.y').offsetParent()：祖父母~小弟d，這個我不太懂，參考官方的範例
$('.b').find('div')：大兄A~小弟d，但大姊B、大妹a沒有被選中(因為是p)
$('.b').find('.h')：我女、孫子、孫女
$('.b').find('.i, .e')：小兄C、大妹a
$('.g').closest('.b')：父母~小弟d(此範例的結果會和parents()一樣)

※.closest()和.parents()的區別

<div>
    A
    <p>
        B
        <div>
            C
            <p>
                D
                <span>E</span>
            </p>
        </div>
    </p>
</div>

※結果：
$('span').parents('div')：ABCDE
$('span').closest('div')：CDE