Javascript/Jquery 稳定的嵌套兄弟答案

【问题标题】：Javascript/Jquery stable nested siblingJavascript/Jquery 稳定的嵌套兄弟
【发布时间】：2026-02-07 19:55:02
【问题描述】：

在重复嵌套结构的 HTML 页面上

<div>
  <div class="ugga">
    <button class="theButton">
  </div>
</div>

几次，一个“.theButton”也有“活动”类，我想用jquery在活动按钮之后找到按钮。

$(".theButton .active").parents(".ugga").parent().next().find(".theButton")

大致可以解决问题。但是，这仍在开发中，因此我不确定嵌套级别 div/div/button 以及带有“.ugga”的父元素是否稳定。因此，每当 HTML 端发生结构变化时，我都必须相应地更改上面的 jquery-magic。

稳定的是，在某个嵌套级别会有一个“.theButton”元素列表，并且都在同一嵌套级别。

在 Jquery 中是否有一种简单的方法可以在活动按钮之后找到下一个按钮，即使结构更改为 div/button 或 form/div/div/button 并且我目前依赖的“.ugga”消失了?类似的东西

$(".theButton active").nextOnSameLevel(".theButton")

【问题讨论】：

标签： javascript jquery

【解决方案1】：

据我所知，没有任何简短的解决方案可以让您这样做。

最方便的方法是在为 DOM 操作设置 javascript 之前准备好 HTML。即使考虑到项目更新，我也会个人花一点时间来更改 js 的一小部分。

但是，如果出于某种原因需要这样做，那么我可能会遍历元素，以找到我需要的元素，例如：

var found = false;
$(".theButton").each(function(){
    if(found){
       // do something with $(this) ...
       return false;
    }
    if($(this).hasClass('active')){
        found = true;
    }
});

JSFiddle

还有一个单线解决方案：

$(".theButton").eq(($.inArray($(".theButton.active")[0], $(".theButton").toArray()))+1);

JSFiddle

【讨论】：

【解决方案2】：

这是用于查看与您感兴趣的元素具有相同父级的所有其他元素。

$(".theButton active").siblings(".theButton");

这将返回在您的 active 按钮元素之前和之后具有 theButton 的所有元素，但如果您专门寻找 active 之后的元素，请使用 next() 和这样的选择器

$(".theButton active").next(".theButton");

【讨论】：