jQuery 遍历 - 后代

在使用jQuery时，我们常常需要通过遍历DOM树来获取某些元素并进行操作。jQuery提供了一系列用于遍历DOM树的方法，其中之一就是遍历后代节点。

后代节点

先来说一下什么是后代节点。后代节点是指某个节点下的所有子节点、孙子节点、曾孙子节点，以此类推，直到所有子孙节点都遍历完。

假设我们有如下一段HTML代码：

<div id="box">
  <p>
    <span>这是span标签</span>
  </p>
  <ul>
    <li>列表项一</li>
    <li>列表项二</li>
  </ul>
</div>

在这个代码中，<div>元素下有两个子元素<p>和<ul>，而<p>中又包含一个子元素<span>。于是，<div>下的所有后代节点包括<p>、<ul>、<span>、<li>等。

遍历后代节点的方法

jQuery提供了两个方法用于遍历后代节点，分别为find()和children()。这两个方法效果类似，但有一些区别。

find方法

find()方法用于查找符合条件的所有后代节点。它的语法如下：

$(selector).find(filter)

其中，selector指要查找的父元素，而filter则指用于过滤的选择器或DOM元素。

我们可以这样使用find()方法来查找<div>下的所有子孙节点：

$('#box').find('*')

这样会返回<div>下的所有后代节点。

children方法

children()方法与find()方法不同，它只查找直接子节点（子元素）。它的语法如下：

$(selector).children(filter)

其中，selector指要查找的父元素，而filter则指用于过滤的选择器或DOM元素。

我们可以这样使用children()方法来查找<div>下的直接子节点：

$('#box').children()

这样会返回<div>下的所有直接子节点，即<p>和<ul>。

我们也可以通过传入一个选择器来过滤所要查找的直接子节点，比如：

$('#box').children('ul')

这样只会返回<div>下的<ul>节点。

总结

在使用jQuery遍历DOM树时，遍历后代节点是一个常见的需求。我们可以使用find()方法和children()方法来分别查找所有后代节点和直接子节点。这样可以方便我们针对某个父元素下的特定子孙元素进行操作。