CODEWITHSUNDEEP
jqueryhtml
David Brooks
David Brooks

Reputation: 759

JQuery move list item to end of unordered list

I am using an unordered list and I want to move the list item with the class of .price to the bottom of the list.

<ul class="itemExtraFieldslist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="price">Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>

I have tried using:

$('ul.itemExtraFieldslist').sortable({
    stop: function (event, ui) {
        $(this).find('li.price').appendTo(this);
    }
});

But this doesn't work. It seems like quite a simple thing but I can seem to get my head around it. I have created a jsFiddle here.

There is already an answer on Stack Overflow but it does not work (my version is based on that answer).

Thanks for your help

Upvotes: 4

Views: 8419

Answers (5)

Alon G
Alon G

Reputation: 3373

you can also use: 

$('li.price').insertAfter($('li').last());

Upvotes: 0

c.P.u1
c.P.u1

Reputation: 17094

Do you mean you want Item 5 always at the bottom? Your fiddle works, you forgot to include jQuery UI in the fiddle.

jQuery('ul.itemExtraFieldslist').sortable({
    stop: function(event, ui) {
      $(this).append($('li.price'));
    }
});

Updated JSFiddle

Upvotes: 0

Richard de Wit
Richard de Wit

Reputation: 7452

Sortable is a function provided by jQuery UI, which your JSFiddle doesn't include. Check the box with jQueryUI and it works: Updated JSFiddle

Also if you want it to work on your own website, you should download the jQuery UI library.

Upvotes: 0

Ankur Verma
Ankur Verma

Reputation: 5933

You may be use straight forward code like this

var parent = $(".itemExtraFieldslist");    
var childToMoveLast = $(".price", parent).remove();
parent.append(childToMoveLast);

Upvotes: 1

Nagesh Salunke
Nagesh Salunke

Reputation: 1288

I don't have an Idea what are you trying to achieve with sortable .
But here is updated Fiddle

$('ul.itemExtraFieldslist').find('li.price').appendTo('ul.itemExtraFieldslist');

Simple. !.

Upvotes: 12

Related Questions