Question

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

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

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

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

大致可以做到这一点。但是，这仍然在开发中，所以我不确定嵌套级div / div /按钮以及带有“.ugga”的父元素是否稳定。因此，只要HTML端有结构更改，我就必须相应地更改上面的jquery-magic。

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

在Jquery中是否有一种简单的方法可以在活动状态之后找到下一个按钮，即使结构更改为div / button或者形成/ div / div /按钮，我依赖的“.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

Answer 2

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

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

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

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

Javascript / Jquery稳定的嵌套兄弟

2 个答案: