Multiple ul reverse order

Question

I'm new to jquery and I have a page with multiple unordered lists ul. I need to reverse order each ul, I saw this answer jQuery reversing the order of child elements but it messes all items with all lists. I tried to change the code to fit my needs but it doesn't do what I want, I can access each li of each ul but I don't know how to reverse the order of the li items.

My code:

$(function() {
  ul = $('ul'); // your parent element
  ul.each(function(i,ul){
     $(this).children().each(function (i,li) {
        alert(i);/*i got to do something here*/
     });
  })  
});

Can you please show your current HTML and how you expect it to end up .... — Manse, Feb 09 '12 at 08:57

score 5 · Accepted Answer · answered Feb 09 '12 at 09:02

5

This is for when you have multiple ul's: http://jsfiddle.net/dG373/4/

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

-

$('ul').each(function(){
    var ul = $(this);
    ul.children().each(function(i, li){
        ul.prepend(li)
    });
});

answered Feb 09 '12 at 09:02

Niklas

13,005
23
79
119

Mark it as an answer by clicking the `✓` sign below the score =) – Niklas Feb 09 '12 at 10:32
This is a really neat solution. Thanks :) – Nick May 15 '12 at 07:16

score 1 · Answer 2 · answered Feb 09 '12 at 09:05

You can move elements around in the DOM quite easily, by inserting them either before or after other elements. When you get a set of elements in a jQuery instance (e.g., using $(...)), you get a static set of the elements that matched, in document order. So reversing them at that point is just a matter of looping through the matched set and moving them:

var list = $("selector_for_the_list");
var items = list.children();
var index;
for (index = items.length - 1; index >= 0; --index) {
    list.append(items[index]);
}

Live example

score 0 · Answer 3 · answered Feb 09 '12 at 09:01

Off the top of my head:

1.) select the items you wish to reverse the order of (e.g. $("div.myitems"))

2.) call $.makeArray on the items to turn into a true array.

3.) call the javascript .reverse() method to invert the array.

I've never done this so I'm not sure if it will work, but it might give you some ideas to build on!

Multiple ul reverse order

3 Answers3