jquery - 如何将元素移动到具有类的元素下方

Question

我有一个项目清单。顶部的一些项目有一个类。

<ul>
    <li class="blue moveMeDown">1</li>
    <li class="blue">2</li>
    <li class="blue">3</li>
    <li class="blue">4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

我正在尝试编写 jQuery 以将 item 1 移到具有 class 的项目下方blue。要针对该类的最后一项，我使用的是：

$elm.nextUntil(":not(.blue)").last()

blue这看起来很乱，如果只有 1 个项目，它甚至都不起作用。必须有更好的方法来做到这一点。

这是 JSfiddle。

当前的 jQuery：

$("ul").on("click", ".moveMeDown", function(e){           
    var $elm = $(this);
        $elm
        .insertAfter($elm.nextUntil(":not(.blue)").last()) 
        .removeClass("blue");

});

Answer 1

我建议：

$('ul').on('click', '.moveMeDown', function(){
    var self = $(this);
    self.insertAfter(self.parent().find('.blue').last()).removeClass('blue');
});

JS 小提琴演示。

此外，正如 TJ Crowder 指出的那样，在下面的评论中，以下内容也有效：

$('ul').on('click', '.moveMeDown', function(){
    var self = $(this);
    self.insertAfter(self.siblings('.blue').last()).removeClass('blue');
});

JS 小提琴演示。

参考：

• find().
• insertAfter().
• last().
• parent().
• siblings().

Answer 2

尝试这个：

$("ul").on("click", ".moveMeDown", function(e){           
    var $elm = $(this);
    $(".blue:last").after($elm.removeClass("blue"));       
});

或者，

$("ul").on("click", ".moveMeDown", function(e){           
    var $lastBlue = $(this).parent().find(".blue").last(),
        $elm = $(this);

    $lastBlue.after($elm.removeClass("blue"));       
});

在这里摆弄：http: //jsfiddle.net/Xb7ue/7/