异常教程

jQuery 遍历 – 同胞(siblings)（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，DOM（文档对象模型）的结构就像一棵复杂的家谱树，每个元素都有“父母”、“孩子”和“兄弟姐妹”。而 jQuery 的遍历方法正是帮助开发者快速定位和操作这些元素的“导航工具”。其中，“同胞（siblings）” 是遍历操作中一个核心概念，它允许开发者通过当前元素快速找到其同级元素，从而实现灵活的交互效果。

本文将深入讲解 jQuery 的 siblings() 方法，从基础语法到高级应用，结合实际案例，帮助读者掌握如何高效操作 DOM 中的同胞元素。

一、什么是同胞元素？

在 HTML 中，同胞元素（siblings） 指的是拥有相同父元素的元素。例如：

<div class="parent">
  <div class="child">元素1</div>
  <div class="child">元素2</div>
  <div class="child">元素3</div>
</div>

上述代码中，三个 <div class="child"> 元素互为同胞，它们共享同一个父元素 <div class="parent">。

1.1 基础概念：DOM 的层级关系

理解 DOM 的层级关系是使用 jQuery 遍历方法的前提：

  • 父元素（Parent）：直接包裹当前元素的上级元素。
  • 子元素（Children）：直接被当前元素包裹的下级元素。
  • 同胞元素（Siblings）：与当前元素处于同一层级的其他元素。

通过 siblings() 方法，开发者可以轻松获取当前元素的同胞元素，而无需手动遍历父元素的所有子节点。

二、jQuery 的 siblings() 方法详解

jQuery 的 siblings([selector]) 方法用于选择当前元素的所有同胞元素。其语法如下：

$(selector).siblings([selector]);

2.1 基础用法：获取所有同胞元素

若不传入参数，siblings() 将返回当前元素的所有同胞元素：

<ul class="menu">
  <li>导航1</li>
  <li>导航2</li>
  <li>导航3</li>
</ul>

<script>
  // 当点击某个导航项时，高亮其所有同胞元素
  $(".menu li").click(function() {
    $(this).siblings().css("background-color", "lightblue");
  });
</script>

在此案例中，当用户点击任意导航项时，$(this) 表示被点击的 <li> 元素，而 siblings() 将返回其他两个导航项，进而为它们添加背景色。

2.2 过滤同胞元素：结合选择器

通过传入 CSS 选择器或 jQuery 选择器，siblings() 可以筛选符合条件的同胞元素：

// 仅选择类名为 "active" 的同胞元素
$(this).siblings(".active");

例如：

<div class="container">
  <div class="item active">元素A</div>
  <div class="item">元素B</div>
  <div class="item">元素C</div>
</div>

<script>
  $(".item").click(function() {
    // 移除其他同胞元素的 "active" 类
    $(this).siblings(".active").removeClass("active");
    // 为当前元素添加 "active" 类
    $(this).addClass("active");
  });
</script>

此代码实现了单选功能：当用户点击某个元素时，其他带有 active 类的同胞元素会失去该类，而当前元素则获得该类。

三、进阶技巧：与遍历方法的结合使用

3.1 结合 parents() 定位父元素

若需要操作父元素的同胞元素，可以先通过 parents() 或 closest() 定位父元素，再调用 siblings()：

<div class="section">
  <div class="box">Box 1</div>
</div>
<div class="section">
  <div class="box">Box 2</div>
</div>

<script>
  $(".box").click(function() {
    // 找到当前 box 的父元素 ".section"，然后获取其所有同胞元素
    $(this).parents(".section").siblings().css("opacity", 0.5);
  });
</script>

当点击任意 .box 元素时，其所在的 .section 父元素的同胞元素（另一个 .section）会变透明。

3.2 结合其他遍历方法：find() 和 filter()

通过 find() 和 filter()，可以进一步缩小操作范围：

// 获取当前元素的同胞元素中所有 <span> 元素，并过滤出内容包含 "test" 的
$(this).siblings().find("span").filter(function() {
  return $(this).text().includes("test");
});

四、实际案例：动态菜单交互

4.1 案例需求

假设有一个导航菜单，要求：

  1. 当鼠标悬停在某个菜单项时，高亮其同胞元素；
  2. 点击某个菜单项时，隐藏其他同胞项。

4.2 HTML 结构

<nav class="main-menu">
  <div class="menu-item">首页</div>
  <div class="menu-item">产品</div>
  <div class="menu-item">关于我们</div>
</nav>

4.3 jQuery 代码实现

$(".menu-item").hover(
  function() { // 鼠标进入时
    $(this).siblings().css("color", "gray");
  },
  function() { // 鼠标离开时
    $(this).siblings().css("color", "");
  }
);

$(".menu-item").click(function() {
  // 隐藏所有同胞元素，并保留当前元素
  $(this).siblings().hide();
});

4.4 扩展思考

若需恢复隐藏的元素，可以添加一个“返回”按钮：

<button id="reset">显示所有菜单</button>

<script>
$("#reset").click(function() {
  $(".menu-item").show(); // 显示所有菜单项
});
</script>

五、性能优化与注意事项

5.1 减少 DOM 操作

频繁操作 DOM 可能影响性能，建议将操作合并：

// 低效写法
$(this).siblings().css("color", "red");
$(this).siblings().css("font-weight", "bold");

// 优化写法
$(this).siblings().css({
  "color": "red",
  "font-weight": "bold"
});

5.2 避免选择器嵌套过深

复杂的嵌套选择器可能降低效率。例如：

// 不推荐：深度嵌套
$(".container > .item").siblings(".active");

// 推荐：先缓存父元素
const $parent = $(".container");
const $siblings = $parent.children(".item").siblings(".active");

5.3 注意空元素的情况

若当前元素没有同胞元素，siblings() 会返回空 jQuery 对象。建议使用条件判断：

const $siblings = $(this).siblings();
if ($siblings.length > 0) {
  // 执行操作
}

六、与原生 JavaScript 的对比

6.1 原生 JavaScript 实现

在原生 JavaScript 中，获取同胞元素需通过 parentNode 和 querySelectorAll：

const element = document.querySelector(".target");
const siblings = Array.from(element.parentNode.children)
  .filter(child => child !== element);

相比之下，jQuery 的 siblings() 方法更简洁，且支持选择器过滤，减少了代码量。

6.2 适用场景选择

  • jQuery 的优势：快速开发、兼容性好，适合中小型项目。
  • 原生 JavaScript 的优势：性能更高，适合对性能要求严格的大型应用。

结论

jQuery 的 siblings() 方法是 DOM 遍历中不可或缺的工具，它简化了同级元素的操作流程，尤其在需要动态交互的场景中表现突出。通过本文的讲解，读者应能掌握以下核心能力：

  1. 理解同胞元素的概念及 DOM 层级关系；
  2. 熟练使用 siblings([selector]) 定位目标元素；
  3. 结合其他遍历方法（如 parents()、find()）实现复杂操作；
  4. 通过实际案例巩固知识，提升代码实践能力。

掌握 siblings() 方法不仅能提升开发效率，还能为后续学习更复杂的 DOM 操作打下坚实基础。建议读者在阅读本文后，动手实现一个完整的导航菜单或表单验证功能，以加深对知识点的理解。

通过本文的学习，开发者可以更自信地应对 DOM 操作中的同胞元素场景，让 jQuery 成为提升开发效率的得力助手。

最新发布

查看更多文章