How do I reverse the order of a list with jquery

Question

I have a dynamic list that I am trying to switch the current order on. In this example it is 1,2,3 I am trying to make it 3,2,1

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

If it was not dynamic i would use $('li:first').before('li:last') a couple times but the number of elements is always changing, is there a simple way to accomplish this?

they are styled a certain way and when the website goes responsive they are in the wrong order and I cant fix it with CSS — user934902, Dec 19 '13 at 18:13
How are you adding them dynamically? why not just prepend them instead? — adeneo, Dec 19 '13 at 18:14

dezman · Accepted Answer · 2013-12-19T22:19:06.467

4

You might want to give ul an id, but this should work:

$('ul').append($('ul').find('li').get().reverse());

Fiddle

edited Dec 19 '13 at 22:19

answered Dec 19 '13 at 18:08

dezman

16,081
9
51
87

for simplicity i kept it as a normal ul, let me test this – user934902 Dec 19 '13 at 18:09
http://jsfiddle.net/DmT5y/1/ did not work – user934902 Dec 19 '13 at 18:10
turns out you have to add the method get() before reverse(); added fiddle – dezman Dec 19 '13 at 18:10
Use .append, not .html – Felix Kling Dec 19 '13 at 18:12
@FelixKling why? then I would have to remove the lis with the original order. – dezman Dec 19 '13 at 18:12
2

`.html` will create new DOM elements. You don't have to remove the elements beforehand, they are simply moved: *"You can also select an element on the page and insert it into another. [...] If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned)"* http://api.jquery.com/append/ – Felix Kling Dec 19 '13 at 18:15
@FelixKling okay, i see, thanks :) – dezman Dec 19 '13 at 22:19

score 4 · Answer 2 · answered Dec 19 '13 at 18:15

4

Another simple solution:

$('li').each(function() {
    $(this).parent().prepend(this);
});

DEMO: http://jsfiddle.net/SxKh6/

Or even faster with plain JavaScript:

var li = document.getElementsByTagName('li');
for (var i = li.length; i-- ;) {
    li[i].parentNode.appendChild(li[i]);
}

DEMO: http://jsfiddle.net/SxKh6/1/

answered Dec 19 '13 at 18:15

VisioN

138,460
30
271
271

1

This answer deserves more upvotes and to be the accepted one imo – A. Wolff Dec 19 '13 at 18:25

A. Wolff · Answer 3 · 2013-12-19T18:16:06.087

3

Many ways, one of them:

DEMO

$('ul').append(function () {
    return $(this).children().get().reverse()
});

EDIT using append() will keep bound events to children

edited Dec 19 '13 at 18:16

answered Dec 19 '13 at 18:09

A. Wolff

73,242
9
90
149

so this works, what does the ('*') mean/target? – user934902 Dec 19 '13 at 18:12
This won't work if the li elements have children as well. – Felix Kling Dec 19 '13 at 18:13
1

@FelixKling that's a good point! Better would be to prepend each children instead – A. Wolff Dec 19 '13 at 18:14

How do I reverse the order of a list with jquery

3 Answers3