在 jQuery 中，查找元素的后代主要使用 .find() 方法。该方法会在匹配元素的所有层级（不仅仅是直接子元素）中查找符合指定选择器的元素。

.find() 方法

  • 功能： 在当前匹配元素的所有后代中查找指定的元素。
  • 语法： $(selector).find(childSelector);
  • 示例： // 在 #container 元素中查找所有 <p> 标签 $("#container").find("p").css("color", "blue");

在这个示例中，所有位于 #container 内部的 <p> 元素（不论层级如何）都会被选中，并设置文字颜色为蓝色。

与 .children() 方法的区别

  • .children() 只返回匹配元素的直接子元素，而不包括更深层级的后代。
  • 示例对比： // 只选取 #container 的直接子元素中的 <p> 标签 $("#container").children("p").css("background", "yellow"); // 选取 #container 内所有层级的 <p> 标签 $("#container").find("p").css("background", "yellow");

当需要遍历整个 DOM 树中所有层级的后代时，建议使用 .find() 方法。

利用 .find() 方法，你可以方便地定位任意深度的后代元素，实现复杂的 DOM 操作和样式设置。