jQuery move list item to end of list

Question

I have this list that can be sorted with sortable. How can I move the li item with class .neutral to the end of the list when sorting is finished?

$(".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>

Solution 1

You can append (moving) them to the end of the list with .appendTo(), like this:

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

You can give it a try here, this gets all the .neutral elements inside and appends them to this which is the ul.thumbs we're currently in, this will work for multiple independent lists of thumbnails too.

Solution 2

The equivalent would be the following:

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

You can move an element around a page by selecting it and appending or prepending it elsewhere.

NB: be careful with scope - if you're using classes and this UI appears multiple times on a page the above selctors will need to be scoped to the current instance using the ui parameter passed into the stop function.