Javascript/Jquery 稳定的嵌​​套兄弟

Question

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

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

有几次，当一个“.theButton”也具有“active”类时，我想使用 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")

Answer 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

还有另一个 oneliner 解决方案:

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

JSFiddle