클래스가있는 요소 아래에서 요소를 이동하는 방법

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> 

나는 클래스 blue으로 항목 아래에 아래 항목 하나를 이동 jQuery를 작성하는 것을 시도하고있다. 그 클래스와 마지막 항목을 대상으로 지정하려면, 내가 이것을 사용하고 있습니다 :

엉망 것 같아, 만 1 blue 항목이 있으면 그것도 작동하지 않습니다

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

. 이것을하기위한 더 좋은 방법이 있어야합니다.

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/