jQuery 遍历子孙元素
jQuery提供了一些方法来在DOM树中向下遍历,以查找给定元素的子孙元素。这些方法可用于在DOM中查找子级、孙级、曾孙级等等给定元素。
以下是三种在DOM树中向下遍历的方法:
- children() - 返回匹配元素的所有直接子元素。
-
find() - 返回匹配元素的所有子孙元素。
children() 方法与 find() 方法的不同之处在于, children() 只在DOM树中向下遍历一层,而 find() 方法可以在多个层次下遍历以选择子孙元素(子元素、孙元素、曾孙元素等)。
jQuery children() 方法
jQuery children() 方法返回匹配元素的所有直接子元素。以下是该方法的简单语法:
我们可以在方法中选择性地提供一个 过滤器 选择器。如果提供了过滤器,元素将通过测试是否与其匹配来进行过滤。
概述
考虑以下HTML内容:
现在如果我们使用 children() 方法如下:
它将产生以下结果:
示例
让我们尝试以下示例并验证结果:
jQuery find() 方法
jQuery find() 方法返回匹配元素的所有后代元素。以下是该方法的简单语法:
这里的 filter 选择器对于这个方法来说是必需的。为了返回匹配元素的所有后代,我们需要将 li
作为过滤器传递,否则如果过滤器被提供为元素,则元素将通过测试是否与它匹配来被过滤。
概述
考虑以下HTML内容:
现在如果我们使用 find(“li”) 方法如下:
它将产生以下结果:
示例
让我们尝试下面的示例并验证结果: