jQuery reversing the order of child elements

Question

What is the best way to reverse the order of child elements with jQuery.

For example, if I start with:

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

I want to end up with this:

<ul>
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ul>

are you doing a sorting type of thing? If not you can do something like this http://api.jquery.com/get/ — Matt, Mar 18 '11 at 03:50
I'm not really sorting here, but I have a separate task that will involve sorting. Thanks for the tip. — tilleryj, Mar 18 '11 at 16:52

score 141 · Answer 1 · answered Mar 18 '11 at 03:57

141

var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());

answered Mar 18 '11 at 03:57

Anurag

140,337
36
221
257

2

I never noticed this answer before now, but I'll agree that it's better than my answer. Mine just illustrates an interesting property of append/prepend. – undefined Jul 11 '13 at 17:18
Short and sweet. One question: What's the difference between `listItems.reverse();` and `listItems.get().reverse()`? I don't understand why the first one doesn't work, isn't ListItems an array of `
` elements?

M -

Aug 04 '14 at 19:48

3

listItems is an instance of the jQuery object which wraps an array of DOM elements. It isn't a regular array why is why we call get() on it to get back a plain array which we know can be reversed. – Anurag Aug 04 '14 at 20:41

1

@tfmontague - Do you have performance benchmarks to prove that? – Anurag Oct 27 '14 at 23:25

@Anurag - I've retracted my earlier statement. Benchmarks show that list.prepend() and list.append() have faster performance than list.html() - http://jsperf.com/reversehtmlvsappend – tim-montague Oct 28 '14 at 08:50

@tfmontague - yeah though it's only marginally faster. I wouldn't care about the differences.. – Anurag Oct 28 '14 at 18:11

Performance is the least of the issues with `.html()` - you should _never_ use `.html` or anything else that serialises the DOM and then deserialises it again just to move elements. That's what node objects are for! – Alnitak Dec 27 '14 at 21:20

1

I disagree with that statement. If using `.html()` *somehow* turned out to be noticeably faster than reordering node elements and your application demands performance and this element reorder is a bottleneck, then by all means please go ahead and use `html()`. The reason I would prefer *not* to use `html()` is because of incorrectness. `html()` will recreate all those elements from scratch and any state that is not serialized such as event handlers will get lost. So it won't simply be a reorder operation anymore but a slightly more destructive operation with other side-effects. – Anurag Dec 30 '14 at 04:53

score 77 · Accepted Answer · edited May 23 '17 at 11:54

77

Edit: Anurag's answer is better than mine.

ul = $('#my-ul'); // your parent ul element
ul.children().each(function(i,li){ul.prepend(li)})

If you call .prepend() on an object containing more than one element, the element being appended will be cloned for the additional target elements after the first, so be sure you're only selecting a single element.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 18 '11 at 03:53

undefined

6,208
3
49
59

i dont think that would get rid of the listed elements though. So you would get a reverse list and the original list. Correct me if im wrong. – Matt Mar 18 '11 at 03:56
2

@Matt - a DOM element can only exist at one place, so in this case it is moved around, not copied. – Anurag Mar 18 '11 at 03:59
@Anurag - interesting. Nice to know. Thanks. – Matt Mar 18 '11 at 04:02
4

in fact, you can copy and paste the code and try it on this page, and see the menu bar reverse itself. – undefined Mar 18 '11 at 04:02
One more clarification: if you call .prepend() on an object containing more than one element, the element being appended will be cloned for the additional target elements after the first. So `$('.many-elements').prepend($('#unique-element')` is going to create copies of the element with id #unique-element. The example above will do this, on a page with multiple `ul` elements, but this won't: `uls = $('ul'); // all UL elements uls.each(function(i,ul){ $(ul).children().each(function(i,li){$(ul).prepend(li)}) })` – undefined Oct 12 '11 at 00:22

score 5 · Answer 3 · answered Mar 18 '11 at 03:55

5

Try this:

$(function() {
  $.fn.reverse = [].reverse;
  var x = $('li');
  $('ul').empty().append(x.reverse());
});

answered Mar 18 '11 at 03:55

You're creating an unused array with `[]`. Wouldn't it be better to use `Array.prototype.reverse` instead of `[].reverse`? – cdmckay Mar 07 '13 at 18:13
The `.empty` is redundant - each element object only exists once and will be automatically removed from its original position in the DOM as its put back into its new position. – Alnitak Dec 27 '14 at 21:38

score 3 · Answer 4 · answered Jan 20 '17 at 11:37

All the answer given before me are best but you can try this also

$('#btnrev').click(function(){

$('ul').html($('ul').find('li').get().reverse());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<button id="btnrev">
click
</button>

score 1 · Answer 5 · answered Jun 26 '18 at 04:28

1

oneliner:

$('ul').append($('ul>').detach().get().reverse());

answered Jun 26 '18 at 04:28

Dieter Bender

11
1

score 0 · Answer 6 · 2019-01-28T09:34:02.837

0

No Jquery Solution

Element.prototype.reverse = function(){
    var c = [].slice.call(this.children).reverse();
    while (this.firstChild) { this.removeChild(this.firstChild); };
    c.forEach(function( child ){ this.appendChild(child) }.bind(this))
}

And use like :

document.querySelector('ul').reverse(); // children are now reversed

edited Jan 28 '19 at 09:34

answered Jan 28 '19 at 09:26

jQuery reversing the order of child elements

6 Answers6

No Jquery Solution

Linked

Related