jQeury入門：遍歷

一旦用jQuery創建一個初始的包裝集，你就能深度遍歷剛剛選擇的包裝集。遍歷可以被分爲三個基礎元件：父級，子級，同級。jQuery爲所有這些元件提供豐富易用的方法。注意每一個方法都能輕易的傳遞給字符串選擇器，有一些甚至能夠用另外的jQuery對象來過濾你的包裝集。關注和參考API documentation on traversing來弄懂你有什麼變化的參數可用。

父級

從包裝集中尋找父級元素的方法包括.parent(), .parents(), .parentsUntil(), 和 .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>

    // 選擇一個元素的直系父級元素：

    // returns [ div.child ]
    $( "span.subchild" ).parent();

    //  選擇一個元素的所有匹配給定選擇器的父級元素
    // returns [ div.parent ]
    $( "span.subchild" ).parents( "div.parent" );

    // returns [ div.child, div.parent, div.grandparent ]
    $( "span.subchild" ).parents();

    //選擇一個元素的除了選擇器中的元素以外的所有的父級元素：
    // returns [ div.child, div.parent ]
    $( "span.subchild" ).parentsUntil( "div.grandparent" );

    // 選擇最靠近的父級元素，注意只有一個父級元素被選中，並且初始元素本身也包含在被搜索的元素中：

    // returns [ div.child ]
    $( "span.subchild" ).closest( "div" );

    // 返回[ div.child ] ，因爲選擇器包含在被搜索的元素中：
    $( "div.child" ).closest( "div" );

子級

從包裝集中尋找子級元素的方法包括 .children() and .find()。這兩個方法之間的區別在於距離創建的包裝集的子結構有多遠。.children()僅僅操作直系的子節點，而.find()可以循環遍歷子節點，這些子節點的子節點，以此類推。

    // 選擇元素直系的子節點   

    // returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
    $( "div.grandparent" ).children( "div" );

    // 在包裝集中，查找所有匹配選擇器的元素 
    // returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
    $( "div.grandparent" ).find( "div" );

同級

在jQuery中，其餘的遍歷方法都是處理查找同級的包裝集。一些基礎的方法是就遍歷的方向而言的。你可以用.prev()查找前一個元素，.next()查找後一個元素，及用.siblings()查找全部的兩個元素。也有建立在這幾個基礎方法上的其他方法： .nextAll()， .nextUntil()， .prevAll() 和 .prevUntil()。

    // 在選擇器中選擇下一個同級元素：

    // returns [ div.surrogateParent1 ]
    $( "div.parent" ).next();

    // 在選擇器中選擇前一個同級元素：

    // 在div.parent之前沒有同級元素的存在的情況下返回[]
    $( "div.parent" ).prev();

    // 在選擇器中選擇所有下一個同級元素：

    // returns [ div.surrogateParent1, div.surrogateParent2 ]
    $( "div.parent" ).nextAll();

    // returns [ div.surrogateParent1 ]
    $( "div.parent" ).nextAll().first();

    // returns [ div.surrogateParent2 ]
    $( "div.parent" ).nextAll().last();

    // 在選擇器中選擇所有上一個同級元素：     

    // returns [ div.surrogateParent1, div.parent ]
    $( "div.surrogateParent2" ).prevAll();

    // returns [ div.surrogateParent1 ]
    $( "div.surrogateParent2" ).prevAll().first();

    // returns [ div.parent ]
    $( "div.surrogateParent2" ).prevAll().last();

用 .siblings()選擇所有同級元素：

    // 在兩個方向上選擇一個元素的匹配給出選擇器的同級元素

    // returns [ div.surrogateParent1, div.surrogateParent2 ]
    $( "div.parent" ).siblings();

    // returns [ div.parent, div.surrogateParent2 ]
    $( "div.surrogateParent1" ).siblings();

到Traversal documentation on api.jquery.com去查看這些和更多方法的全部文檔。

在文檔中遍歷很長距離的時候要當心——複雜的遍歷必須使文檔結構保持不變，這很難保證即使你是創建整個從服務器到客戶端應用程序的人。一步或者兩步的遍歷會很不錯，但最好還是避免從一個容器到另一個容器的遍歷。

原文地址