如何选中所有兄弟元素的子元素？用jQuery遍历实现div悬停加类

嘿，这两个jQuery的需求我帮你拆解清楚，直接上解决方案：

要选中某个元素的所有兄弟元素里的子元素，核心是结合jQuery的兄弟选择方法与后代查找，常用两种实用思路：

• 如果你已经拿到了当前目标元素（比如$(this)），可以先获取它的所有兄弟元素，再用.find()精准定位子元素：

  // 示例：选中当前div的所有兄弟div里的<h2>标签
  $(this).siblings('div').find('h2');
  

• 另一种方式是先定位父容器，再筛选出父容器内除当前元素外的所有子元素，最后查找它们的子节点：

  // 示例：选中当前div的父元素下，其他div里的<p>标签
  $(this).parent().children('div').not(this).find('p');
  

简单来说，.siblings()能直接拿到当前元素的所有兄弟节点，配合.find()就能轻松定位到兄弟元素的子元素啦。

这个需求可以通过jQuery的hover()事件配合.siblings()方法快速实现，以下是完整可运行的代码示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .abc { color: Red; }
</style>
<div>
  <h2>h2</h2>
  <p>p</p>
</div>
<div>
  <h2>h2</h2>
  <p>p</p>
</div>
<div>
  <h2>h2</h2>
  <p>p</p>
</div>
<script>
  // 给所有div绑定hover事件
  $('div').hover(
    // 鼠标移入时：选中当前div的所有兄弟元素，添加abc类
    function() {
      $(this).siblings().addClass('abc');
    },
    // 鼠标移出时：移除所有兄弟元素的abc类
    function() {
      $(this).siblings().removeClass('abc');
    }
  );
</script>

思路拆解： #

• hover()方法接受两个回调函数，分别对应鼠标移入和移出的动作；
• $(this).siblings()会精准选中当前悬停div的所有兄弟元素（也就是页面上其余的div）；
• 通过.addClass('abc')和.removeClass('abc')切换样式类，实现鼠标悬停时其余div文字变红的效果。

如果你偏好分开绑定事件，也可以用mouseenter和mouseleave替代hover()，效果完全一致：

$('div').on('mouseenter', function() {
  $(this).siblings().addClass('abc');
}).on('mouseleave', function() {
  $(this).siblings().removeClass('abc');
});

内容的提问来源于stack exchange，提问作者ashish vyas