jQuery przenieś element listy na koniec listy

Question

Mam tę listę, którą można posortować sortable. Jak mogę przenieść element li z klasą .neutral na koniec listy po zakończeniu sortowania?

$(".thumbs").sortable({ 
    stop: function(event, ui) { 
     // move .neutral at the end of this list 
    } 
}); 

<ul class="thumbs"> 
    <li>red</li> 
    <li>green</li> 
    <li class="neutral">none</li> 
    <li>yellow</li> 
    <li>blue</li> 
<ul> 

Answer 1

Możesz dołączyć (w ruchu), żeby na końcu listy z .appendTo(), tak:

$(".thumbs").sortable({ 
    stop: function(event, ui) { 
     $(this).find('.neutral').appendTo(this); 
    } 
}); 

You can give it a try here, to pobiera wszystkie .neutral elementów wewnątrz i dołącza je do this który jest ul.thumbs jesteśmy obecnie w, to będzie działać dla wielu niezależnych list miniaturek też.

Answer 2

Równowartość byłby następujący:

$(".neutral").appendTo(".thumbs"); 
OR 
$(".thumbs").append(".neutral"); 

można przenieść element wokół strony, wybierając go i dodanie lub poprzedzenie go gdzie indziej.

NB: zachowaj ostrożność w zakresie - jeśli używasz klas, a ten interfejs pojawi się wiele razy na stronie, powyższe selory będą musiały być ograniczone do bieżącej instancji za pomocą parametru ui przekazanego do funkcji stop.