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

Question

我想要下一个具有相同类的元素。所以我在类里面有一个点击 Action “计算容器”。当我单击此元素时，我想访问具有“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

试试这个:-

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

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

处理.calculationContainer在最后位置的情况(如demo所示)

DEMO