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
– Manse, Commented Feb 9, 2012 at 8:57

Niklas · Accepted Answer · 2012-02-09 09:02:41Z

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) }); });

Mark it as an answer by clicking the ✓ sign below the score =)

T.J. Crowder · Accepted Answer · 2012-02-09 09:05:16Z

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

csharpnumpty · Accepted Answer · 2012-02-09 09:01:50Z

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!

Collectives™ on Stack Overflow

Multiple ul reverse order

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related