jQuery:查找具有相同类的下一个元素

Question

我希望下一个Element具有相同的类.所以我对"computeContainer"类进行了点击操作.当我单击此元素时,我想要使用类"calculationContainer"访问下一个元素.但我所尝试的一切都行不通.也许有人可以帮我这个？

我有这个HTML代码:

<div class="body">
    <div class="inner">
        <div class="calculationContainer">
            <div class="element">
                <input type="text" id="name1">
            </div>
        </div>
    </div>
</div>
<div class="body">
    <div class="inner">
        <div class="calculationContainer">
            <div class="element">
                <input type="text" id="name2">
            </div>
        </div>
    </div>
</div>
<div class="body">
    <div class="inner">
        <div class="calculationContainer">
            <div class="element">
                <input type="text" id="name3">
            </div>
        </div>
    </div>
</div>

而我的jQuery:

$('.calculationContainer').on('click', function() {
        var amountCalculationContainer = $(this);
        var nextAmountCalculationContainer = amountCalculationContainer.next('.calculationContainer');  //<- Only finds the div with class "element"

});

Answer 1

如果您更改 HTML 的结构，则不会中断的技术是：

1. 使用.index()在所有容器的列表中查找容器
2. 增加索引
3. 调用.eq()来选择下一个容器，而不管它在 DOM 中的什么位置

JavaScript：

const next = (event) => {
   const list = $('.calculationContainer');    //all containers
   const index = list.index($(event.target));  //current container
   const target = (index + 1) % list.length;   //increment with wrap
   const nextAmountCalculationContainer = list.eq(target);
   };
$('.calculationContainer').click(next);

看看你能不能抓住红色按钮：https :
//jsfiddle.net/55pmmzd6/68

Answer 2

试试这个 :-

$('.calculationContainer').on('click', function() {
    var $elem = $(this).closest('div.body').next().find('div.calculationContainer')    
});

使用.closest()遍历并找到第一div.body父,然后用.next()获得下一个元素,然后找到div.calculationContainer与.find().

处理.calculationContainer最后位置时的情况(如演示中所示).

DEMO