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

【问题标题】：How would I select a div ID with a specific class and then move that class to the next ID with jQuery/javascript?如何选择具有特定类的 div ID，然后使用 jQuery/javascript 将该类移动到下一个 ID？
【发布时间】：2013-07-17 16:40:13
【问题描述】：

我有这个代码：

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

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

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

我想要做的是当我单击一个按钮时，jquery 找到具有“m-active”类的“m-item”类的 div，从该 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>

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

谢谢。

【问题讨论】：

ID 必须是唯一的。
您不应该在同一个 HTML 文档中重复 ID - 它们必须是唯一的
是的，实际上我刚刚意识到这一点并且正要修复它。
当最后一个 div 有类并且你点击按钮时会发生什么？什么都没有，还是应该让第一个 div 得到它？

标签： javascript jquery addclass removeclass

【解决方案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

【讨论】：

【解决方案2】：

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

进一步阅读：

next()、addClass()、removeClass()

【讨论】：

太棒了，正是我需要的。并感谢您的阅读信息。我将如何做到这一点，以便在最后一个 div 之后，单击按钮时什么也没有发生？
我相信（我可能会在此处更正）如果没有紧随其后的具有类 m-item 的兄弟 div （即您描述的行为），上述行将无济于事。