jQuery 遍歷

在本教程中,你將學習如何使用 jQuery 遍歷 HTML DOM。

什麼是遍歷

到目前為止我們看到的 jQuery 選擇器只允許我們選擇 DOM 樹下的元素。但是在很多情況下你需要選擇父元素或祖先元素; 這就是 jQuery 的 DOM 遍歷方法發揮作用的地方。使用這些遍歷方法,我們可以非常輕鬆地在 DOM 樹上上下移動。

DOM 遍歷是 jQuery 的一個突出特性。要充分利用它,你需要了解 DOM 樹中元素之間的關係。

<body>
    <div class="container">    
        <h1>Hello World</h1>
        <p>This is a <em>simple paragraph</em>.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
        </ul>
    </div>    
</body>

上面示例中的 HTML 程式碼可以由以下 DOM 樹表示:

DOM 樹

上圖顯示了元素之間的父/子關係:

  • <body> 元素是 <div> 元素的元素,是裡面所有元素的祖先。封閉的 <div><h1><p><ul> 元素的 元素,是 <body> 元素的子元素。
  • 元素 <h1><p><ul>兄弟姐妹,因為它們共享相同的父元素。
  • <h1> 元素是 <div> 元素的一個元素,是 <body> 元素的後代元素。此元素沒有任何子元素。
  • <p> 元素是 <em> 元素的元素,是 <div> 元素的元素,是 <body> 元素的後代元素。它所含的 <em> 元素是 <p> 元素的元素,是 <div><body> 元素的後代元素。
  • 類似地, <ul> 元素是 <li> 元素的元素,是 <div> 元素的元素和 <body> 元素的後代元素。所含 <li> 元素是 <ul> 元素的元素,是 <div><body> 元素的後代元素。此外,這兩個元素是兄弟元素。

注意: 在邏輯關係中,祖先是父母、祖父母、曾祖父母等等。後代是孩子、孫子、曾孫等等。同級元素是共享相同父級的元素。

遍歷 DOM 樹

現在你已經瞭解了 DOM 樹中元素之間的邏輯關係。在接下來的章節中,你將學習如何使用 jQuery 執行各種遍歷操作,例如遍歷,向下和橫向移動 DOM 樹。

在下一章中,你將學習如何在 DOM 樹中選擇上層元素。