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 树中选择上层元素。