jQuery 遍歷

Created: October-14, 2018

在本教程中，你將學習如何使用 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 樹中選擇上層元素。