Question

我有这段代码：

<div class="m-item m-active">
</div>

<div class="m-item">
</div>

<div class="m-item">
</div>

我想要做的是当我点击一个按钮时，jquery找到具有“m-active”类的div，该类具有“m-active”类，从该div中删除“m-active”类并将其移至下一个“m-item”div。

所以单击按钮后，代码应如下所示（m-active在第二个div上）：

<div class="m-item">
</div>

<div class="m-item m-active">
</div>

<div class="m-item">
</div>

有谁知道如何做到这一点？

谢谢。

Answer 1

这个答案会在到达结束时处理第一个元素的回绕。如果没有任何元素处于活动状态，它也会起作用。

单击该按钮时，找到活动元素，然后使用jQuery next()函数查找下一个.m-item。如果找不到该项（next.length === 0），则获取第一个.m-item。最后切换m-active类：

$('#get-next').on('click', function() {
    var active = $('.m-active');
    var next = active.next('.m-item');
    if(next.length === 0) {
         next = $('.m-item').eq(0);   
    }

    active.removeClass('m-active');
    next.addClass('m-active');    
});

<强> Working Demo

Answer 2

$('.m-active').removeClass('m-active').next('.m-item').addClass('m-active');

进一步阅读：

next()，addClass()，removeClass()

如何选择具有特定类的div ID，然后使用jQuery / javascript将该类移动到下一个ID？

2 个答案: