Topic awaiting preservation: Reverse list order? (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26288" title="Pages that link to Topic awaiting preservation: Reverse list order? (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Reverse list order? <span class="small">(Page 1 of 1)</span>\$

ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-20-2005 03:01 Okay, so here's the deal. I've just started learning about DOM and JavaScript, and I figure the best way to learn is by doing. The thing is, I have no idea what I'm doing, so that's the part I'm going to need help with. Can someone show me the most elegant way to take an unordered list, and simply reverse the order of the list items in it? Before: code: <ul class="reversethis"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> After: code: <ul class="reversethis"> <li>Item 3</li> <li>Item 2</li> <li>Item 1</li> </ul> (Edited by ozphactor on 07-20-2005 03:03)
Danaan Nervous Wreck (II) Inmate From: Here, there and everywhere Insane since: May 2005	posted 07-20-2005 17:51 Well I guess you could use a JavaScript array and get it to display each item in the array starting from the last.
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-20-2005 18:21 Erm, yeah, that's along the lines of what I was thinking as well, but as I said, I know no JavaScript at all. A code example would be very helpful...
Counterpoint Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2005	posted 07-20-2005 23:09 Enter this code into your JavaScript section: code: function reverseList(id) { c=document.getElementById(id); el=c.lastChild.previousSibling; p=el.previousSibling; while(el) { c.appendChild(el); el=p; p=el.previousSibling; } } Your list should look like this (make sure you add the id to the ul element): code: <ul id="myList" class="reversethis"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> To reverse the list just call the JavaScript function by passing the id of your list: code: <a href="javascript: reverseList('myList');">Click to Reverse</a> Hope this helps! (Edited by Counterpoint on 07-20-2005 23:10)
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-20-2005 23:46 Great, that code works like a charm. But suppose I wanted to run the script as soon as the page loaded, and not when the user clicked on a link. How would I set that up? Sorry to inundate you with all these newbie questions...
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 07-21-2005 02:43 <body onload="reverseList('mylist');" > .:[ Never resist a perfect moment ]:.
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-21-2005 03:23 Ay, thanks. That does it.
kryogenix Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2005	posted 07-22-2005 09:59 If you want the list reversed as soon as the page loads, why not generate it in reverse order in the first place rather than relying on JavaScript?
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-23-2005 03:59 Heh, good question. It's really just a hack to circumvent some stupid limitation of the content management system I'm using (names omitted to protect the innocent ). Luckily, I switched to another CMS just today, and no longer need this code. Yay.

Topic awaiting preservation: Reverse list order? (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26288" title="Pages that link to Topic awaiting preservation: Reverse list order? (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Reverse list order? <span class="small">(Page 1 of 1)</span>\$

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-20-2005 03:01

Okay, so here's the deal. I've just started learning about DOM and JavaScript, and I figure the best way to learn is by doing. The thing is, I have no idea what I'm doing, so that's the part I'm going to need help with.

Can someone show me the most elegant way to take an unordered list, and simply reverse the order of the list items in it?

Before:

code:

<ul class="reversethis">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

After:

code:

<ul class="reversethis">
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</ul>

(Edited by ozphactor on 07-20-2005 03:03)

Danaan
Nervous Wreck (II) Inmate

From: Here, there and everywhere
Insane since: May 2005

posted 07-20-2005 17:51

Well I guess you could use a JavaScript array and get it to display each item in the array starting from the last.

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-20-2005 18:21

Erm, yeah, that's along the lines of what I was thinking as well, but as I said, I know no JavaScript at all. A code example would be very helpful...

Counterpoint
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2005

posted 07-20-2005 23:09

Enter this code into your JavaScript section:

code:

function reverseList(id) {
   c=document.getElementById(id);
   el=c.lastChild.previousSibling;
   p=el.previousSibling;
   while(el) {
      c.appendChild(el);
      el=p;
      p=el.previousSibling;
   }
}

Your list should look like this (make sure you add the id to the ul element):

code:

<ul id="myList" class="reversethis">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

To reverse the list just call the JavaScript function by passing the id of your list:

code:

<a href="javascript: reverseList('myList');">Click to Reverse</a>

Hope this helps!

(Edited by Counterpoint on 07-20-2005 23:10)

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-20-2005 23:46

Great, that code works like a charm. But suppose I wanted to run the script as soon as the page loaded, and not when the user clicked on a link. How would I set that up? Sorry to inundate you with all these newbie questions...

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 07-21-2005 02:43

<body onload="reverseList('mylist');" >

.:[ Never resist a perfect moment ]:.

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-21-2005 03:23

Ay, thanks. That does it.

kryogenix
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2005

posted 07-22-2005 09:59

If you want the list reversed as soon as the page loads, why not generate it in reverse order in the first place rather than relying on JavaScript?

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-23-2005 03:59

Heh, good question. It's really just a hack to circumvent some stupid limitation of the content management system I'm using (names omitted to protect the innocent ). Luckily, I switched to another CMS just today, and no longer need this code. Yay.