在 jQuery 中，操作同胞元素（即与某个元素共享相同父元素的其它元素）主要可以使用以下方法：

1. .siblings() 方法

  • 功能： 返回匹配元素的所有同胞元素，不包括自身。
  • 示例： // 为所有与 .active 同胞的元素添加半透明样式 $(".active").siblings().css("opacity", 0.5);

2. .next() 和 .prev() 方法

  • .next()： 返回匹配元素之后的第一个同胞元素（紧邻的下一个）。 // 将 .item 元素后面紧接的同胞元素文字颜色设为绿色 $(".item").next().css("color", "green");
  • .prev()： 返回匹配元素之前的第一个同胞元素（紧邻的上一个）。 // 将 .item 元素前面的紧邻同胞元素文字颜色设为蓝色 $(".item").prev().css("color", "blue");

3. 扩展方法

  • .nextAll() 和 .prevAll()： 分别返回匹配元素之后或之前的所有同胞元素。 // 将 .item 元素之后的所有同胞元素设置为粗体 $(".item").nextAll().css("font-weight", "bold");
  • .nextUntil(selector) 和 .prevUntil(selector)： 从当前元素开始，返回直到遇到匹配指定选择器之前的所有同胞元素。 // 返回 .item 元素之后，直到遇到 .stop 元素之前的所有同胞 $(".item").nextUntil(".stop").css("background", "yellow");

这些方法可以帮助你灵活地在 DOM 树中定位、筛选和操作同一父级下的元素，适用于实现菜单导航、列