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>

Answer 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.