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

Question

我希望下一个Element具有相同的类。所以我在课堂上有一个点击动作 ＆＃34; calculationContainer＆＃34 ;.当我单击此元素时，我希望能够使用类＆＃34; calculationContainer＆＃34;访问下一个元素。但我尝试过的所有工作都没有。也许有人可以帮我这个？

我有这个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

试试这个： -

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

使用.closest()遍历并找到第一个div.body父级，然后使用.next()获取下一个元素，然后使用div.calculationContainer找到.find()。

处理.calculationContainer位于最后位置时的情况（如演示中所示）。

DEMO

Answer 2

如果更改HTML的结构，不会破坏的技术是：

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

<强> JavaScript的：

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

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

Answer 3

试试这个：

$('.calculationContainer').on('click', function() {
    var next_ele = $(this).parents("body").find(".calculationContainer");
    var $next = next_ele.filter(":gt(" + next_ele.index(this) + ")").first()
    console.log($next.html())
  });