Change order of several lists at once

Question

How can I change the order of both lists, while preventing to mix them up. I know how to do it with one list, but get stuck when I got several..

Fiddle

HTML:

<ul>
    <li>A</li>
    <li>B</li>
</ul>
<ul>
    <li>C</li>
    <li>D</li>
</ul>
<a href="#" class="switch_order">Switch</a>

jQuery

$('body').on('click', '.switch_order', function(e){
  var list = $('ul');
  var listItems = list.children('li');
  list.append(listItems.get().reverse());
});

That A and B switch, so B becomes the first li tag and A second, and in the second list same story with C and D — Pepijn Gieles, Apr 18 '14 at 10:33
duplicate of http://stackoverflow.com/questions/5347839/jquery-reversing-the-order-of-child-elements — Bhojendra Rauniyar, Apr 18 '14 at 10:35
The answer of the above question mixed up my ul's, so that was not the answer I was looking for, so it's a slightly different question.. — Pepijn Gieles, Apr 18 '14 at 14:29

score 1 · Answer 1 · answered Apr 18 '14 at 10:35

1

$('body').on('click', '.switch_order', function(e){
 $('ul').each(function(){
  var listItems = $(this).children('li');
  $(this).append(listItems.get().reverse());
 });
});

Updated JSFiddle

answered Apr 18 '14 at 10:35

T J

42,762
13
83
138

Thanks! I knew it was something with each() but didn't know how to place it, this really helps! – Pepijn Gieles Apr 18 '14 at 10:36

score 1 · Accepted Answer · answered Apr 18 '14 at 10:37

1

You can use:

$('body').on('click', '.switch_order', function(e){
    $('ul li').each(function(i,li){
        $(this).parent().prepend(li);
    })
});

Fiddle Demo

answered Apr 18 '14 at 10:37

Felix

37,892
8
43
55

score 0 · Answer 3 · answered Apr 18 '14 at 10:47

0

This is one way

All I did here was give an id to each <ul> and targeted them seperately

answered Apr 18 '14 at 10:47

lennon626

124
6

That's an option indeed, but I got a list where people can add some ul's and li's, so I try to not work with an id – Pepijn Gieles Apr 18 '14 at 14:20

Change order of several lists at once

3 Answers3