jQuery 祖先元素

jQuery 遍历 - 查找祖先元素

在文档对象模型 (DOM) 的上下文中，祖先元素是指从特定元素向上追溯树结构中的父元素、祖父元素、曾祖父元素等。

jQuery 提供了强大的方法，可以向上遍历 DOM 树并选择这些祖先元素。

可以把它想象成从你自己追溯你的家谱，向上找到你的父母、祖父母等等。

向上遍历的关键方法

三个用于查找祖先元素的基本 jQuery 方法是：

• parent(): 选择每个被选元素的直接（紧邻的）父元素。
• parents(): 选择每个被选元素的所有祖先元素，直到文档的根元素 (<html>)。可以可选地通过选择器过滤。
• parentsUntil(): 选择被选元素与指定停止点（不包含停止点）之间的所有祖先元素。

jQuery parent() 方法

parent() 方法只在 DOM 树中向上移动一级来查找直接父元素。

示例：查找特定 <span> 的直接父元素 <div>。

// HTML 代码： <div><p><span>Text</span></p></div>

// jQuery 代码（假设脚本在 DOM 就绪后运行）
$(() => {
  // 选择 span 元素
  const spanElement = $('span');

  // 获取直接父元素（即 <p> 元素）
  const directParent = spanElement.parent();
  directParent.css('border', '1px solid red'); // 示例：高亮显示父 <p> 元素
});

如果最初选择了多个元素，parent() 方法将返回它们唯一的直接父元素的集合。

jQuery parents() 方法

parents() 方法从每个被选元素一直向上遍历 DOM 树，收集到达 <html> 元素之前的所有祖先元素。

示例：查找 <span> 的所有祖先元素。

// HTML 代码： <div id='grandparent'><p id='parent'><span>Text</span></p></div>

$(() => {
  // 获取 span 的所有祖先元素
  const allAncestors = $('span').parents();

  // 这会选择 <p>、<div>、<body> 和 <html> 元素。
  allAncestors.addClass('highlight-ancestor'); // 示例：为所有祖先元素添加类
});

您可以通过向 parents() 提供选择器来过滤结果。这对于查找特定类型的祖先元素非常有用。

示例：仅查找 <span> 的祖先 <div> 元素。

$(() => {
  // 仅获取是 <div> 的祖先元素
  const divAncestors = $('span').parents('div');

  // 这仅选择 <div id='grandparent'>。
  divAncestors.css('background-color', 'lightblue'); // 示例：设置祖先 div 的样式
});

jQuery parentsUntil() 方法

parentsUntil() 方法查找起始元素与指定选择器（停止点）之间的所有祖先元素。不包含与停止选择器匹配的元素。

示例：查找 <span> 和其祖先 <div id='grandparent'> 之间的所有祖先元素。

// HTML 代码： <div id='grandparent'><p id='parent'><span>Text</span></p></div>

$(() => {
  // 获取从 <span> 开始到（但不包含）<div id='grandparent'> 的祖先元素
  const intermediateAncestors = $('span').parentsUntil('#grandparent');

  // 这仅选择 <p id='parent'> 元素。
  intermediateAncestors.css('font-style', 'italic'); // 示例：设置中间父元素的样式
});

如果提供给 parentsUntil() 的选择器与任何祖先元素都不匹配，它的行为类似于 parents()，会一直向上追溯到 <html>。

jQuery 遍历参考

要全面了解所有 jQuery 遍历方法，包括后代、同级和过滤，请查阅官方 jQuery 文档。