jQuery 同级元素

jQuery 遍历 - 查找同级元素

DOM 树中的同级元素是指共享同一父元素的元素。可以想象它们是坐在同一树枝上的兄弟姐妹。

jQuery 提供了方法来在 DOM 树中进行横向导航，以查找这些同级元素。

横向遍历的关键方法

几个有用的 jQuery 方法允许您选择同级元素：

• siblings(): 选择匹配元素的所有同级元素。可以可选地通过选择器过滤。
• next(): 选择每个匹配元素的紧邻的下一个同级元素。
• nextAll(): 选择每个匹配元素在文档顺序中之后出现的所有同级元素。可以可选地过滤。
• nextUntil(): 选择被选元素与指定停止选择器（不包含停止点）之间的所有跟随的同级元素。
• prev(): 选择每个匹配元素的紧邻的上一个同级元素。
• prevAll(): 选择每个匹配元素在文档顺序中之前出现的所有同级元素。可以可选地过滤。
• prevUntil(): 选择被选元素与指定停止选择器（不包含停止点）之间的所有前面的同级元素。

jQuery siblings() 方法

siblings() 方法返回所有与被选元素共享同一父元素的元素，不包含被选元素本身。

示例：查找 <h2> 元素的所有同级元素。

// HTML 代码：
// <div>
//   <h1>Title</h1>
//   <h2>Subtitle</h2>
//   <p>Paragraph 1</p>
//   <p>Paragraph 2</p>
//   <h6>Footer</h6>
// </div>

$(() => {
  // 选择 h2 元素
  const subtitle = $('h2');

  // 获取其所有同级元素
  const h2Siblings = subtitle.siblings();

  // 这将选择 h1、两个 p 和 h6。
  h2Siblings.css('border', '1px dashed blue'); // 示例：高亮显示同级元素
});

您可以通过提供选择器来过滤同级元素。

示例：仅查找 <h2> 的 <p> 同级元素。

$(() => {
  // 仅获取 h2 的 <p> 同级元素
  const pSiblings = $('h2').siblings('p');

  // 这仅选择两个 <p> 元素。
  pSiblings.css('font-weight', 'bold'); // 示例：设置段落同级元素的样式
});

jQuery next() 方法

next() 方法仅返回每个被选元素的紧邻的下一个同级元素。如果没有下一个同级元素，它将返回一个空的 jQuery 对象。

示例：查找紧随 <h2> 之后的元素。

$(() => {
  // 获取 h2 紧随其后的单个元素
  const elementAfterH2 = $('h2').next();

  // 这将选择第一个 <p> 元素。
  elementAfterH2.css('color', 'green'); // 示例：设置下一个元素的样式
});

jQuery nextAll() 方法

nextAll() 方法返回每个被选元素在文档顺序中之后出现的所有同级元素。

示例：查找 <h2> 之后的所有元素。

$(() => {
  // 获取 h2 之后的所有元素
  const allElementsAfterH2 = $('h2').nextAll();

  // 这将选择两个 <p> 元素和 <h6>。
  allElementsAfterH2.wrap('<div style="background-color: yellow;"></div>'); // 示例：包裹后续同级元素
});

与 siblings() 一样，nextAll() 也可以通过选择器进行过滤（例如，$('h2').nextAll('p')）。

jQuery nextUntil() 方法

nextUntil() 方法返回被选元素与指定停止选择器之间的所有跟随的同级元素。不包含与停止选择器匹配的元素。

示例：查找 <h2> 和 <h6> 之间的所有同级元素。

$(() => {
  // 获取 h2 之后直到（但不包含）h6 的同级元素
  const elementsBetween = $('h2').nextUntil('h6');

  // 这将选择两个 <p> 元素。
  elementsBetween.css('font-style', 'italic'); // 示例：设置中间同级元素的样式
});

jQuery prev()、prevAll() 和 prevUntil() 方法

这些方法的功能与相应的 next... 方法完全相同，但操作方向相反，选择前面的同级元素（在 HTML 中出现在被选元素之前并共享同一父元素的元素）。

• prev(): 获取紧邻前面的同级元素。
• prevAll(): 获取所有前面的同级元素。
• prevUntil(): 获取被选元素与指定停止选择器之间的所有前面的同级元素。

使用 prev() 的示例：

$(() => {
  // 获取 h2 紧邻前面的元素
  const elementBeforeH2 = $('h2').prev();

  // 这将选择 <h1> 元素。
  elementBeforeH2.css('text-decoration', 'underline'); // 示例：设置前面元素的样式
});

jQuery 遍历参考

掌握遍历对于高效的 DOM 操作至关重要。请查阅官方 jQuery 文档，获取详细示例和更多方法。