雜項遍歷 (jQuery 11)

官網連結
目前有6個：

.not()：基本過濾器 (jQuery 6)已講過
.add()：增加選擇的結果
.addBack()：增加上一個選擇的結果
.contents()：取得元素的子元素，和內容過濾器的「:contents」不一樣，裡面不能放參數
.end()：回上一層
.andSelf()：包括自己，1.8把它標識為過時了，是過時不是移除，所以還能用

※.add()

$('span, p').css('color', 'red');
$('span').add('p').css('color', 'red');
$('span').css('color', 'red').add('p').css('background-color', 'green');
----------
<div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
</div>
<p>p</p>

※第一行是抓元素是span和p；第二行是抓span，然後將p抓進來，所以效果一樣

※第三行抓span先設定顏色再將p抓進來，所以p沒有變紅，一直到後面的綠底會針對全部的元素設定，如果css裡的屬性一樣，後者會蓋前者

※.addBack()

$("div.a").find("p").css('background-color', 'green');
$("div.a").find("p").addBack().css('background-color', 'green');
----------
<div class="A">
    <p>
        <strong>
            1
            <code>2</code>
        </strong>
    </p>
    
    <div class="a">
        3
        <p>4</p>
        <p>5</p>
    </div>
</div>

※第一行還沒加addBack()時，只抓到4和5

※加了之後，會抓到345，也就是抓到$('div.a')，所以才叫addBack

※.contents()

$(function($) {
    $('div').contents().filter(function(){
        alert($(this).text());
        return true;
    }).css('background-color', 'green');
});
----------
<div>
    div1
    <span class="a">span</span>
    div2
    <p class="b">p</p>
    div3
    <ul>
        <ol>1</ol>
        <ol>2</ol>
    </ul>
    div4
</div>

※取得div的子元素，所以div1~4不會被選中，其他都會

※.end()

$("div").find("p").find('span').css('color', 'red');
$("div").find("p").find('span').end().css('color', 'red');
$("div").find("p").find('span').end().end().css('color', 'red');
----------
<div>
    div
    <p>
        p
        <span>span</span>
    </p>
</div>

※.end()是回上一層

※第一行沒用end()時，抓到的是span而已

※第二行用了一個end()，所以回到上一層p，抓到的是p和span

※第三行用了兩個end()，所以回到上兩層div，抓到的是div、p、span

※.andSelf()

$('span:eq(2)').nextAll().andSelf().css('color', 'red');
----------
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>

※結果是CDE；若沒加andSelf()，結果會是DE