如何移動具有類的元素下的元素

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移動項目1向下跌破項目與類blue。要定位與該類的最後一個項目，我使用的是這樣的：

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

這似乎是一個爛攤子，而且如果只有1 blue項目甚至不工作。必須有更好的方法來做到這一點。

Here's the 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 Fiddle demo。

另外，如T.J.克勞德指出，in the comment below，以下也適用：

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

JS Fiddle demo。

參考文獻：

• 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/