Sort unordered list with Javascript / jQuery

Question

I am creating unordered lists dynamically. This creates an output similar to this:

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
        <ul>
            <li>Item 3.1</li>
            <li>Item 3.2</li>
            <li>Item 3.3</li>
        </ul>
    <li>item 4</li>
    <li>Item 5</li>
        <ul>
            <li>Item 5.1</li>
            <li>Item 5.2</li>
            <li>Item 5.3</li>
        </ul>
    <li>item 6</li>
</ul>

I would like to be able to sort through them, after they are created, so that any item that has a sublist(for example item 3 & item 5) will go to the top of the list, for output like this:

<ul>
    <li>item 3</li>
        <ul>
            <li>Item 3.1</li>
            <li>Item 3.2</li>
            <li>Item 3.3</li>
        </ul>
    <li>Item 5</li>
        <ul>
            <li>Item 5.1</li>
            <li>Item 5.2</li>
            <li>Item 5.3</li>
        </ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 4</li> 
    <li>item 6</li>
</ul>

I am thinking I can do this with jQuery or the javascript .sort() method but I'm not sure where to go with it. Any advice?

Is this even valid HTML? Shouldn't the second unordered list be a child of the li element? According to this stackoverflow answer, you should change your HTML: stackoverflow.com/questions/5899337/… — thatidiotguy
– thatidiotguy, Commented Feb 17, 2015 at 16:06
thatidiotguy - I have seen it go both ways in my research and this is the way I decided on. It's not set in stone and is a very easy switch to make the <ul> a child of the <li>. From the upvotes you have it looks like others agree with you so I will change it. My question still remains. — NiteTrip
– NiteTrip, Commented Feb 17, 2015 at 16:15

JBA · Accepted Answer · 2015-02-17 16:14:33Z

4

Firstly you should put your sublists inside their parent element and give a class to your list, like this:

<ul class="autoReorder">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3
      <ul>
         <li>Item 3.1</li>
         <li>Item 3.2</li>
         <li>Item 3.3</li>
      </ul>
   </li>
   <li>item 4</li>
   <li>Item 5
      <ul>
         <li>Item 5.1</li>
         <li>Item 5.2</li>
         <li>Item 5.3</li>
      </ul>
   </li>
   <li>item 6</li>
</ul>

Then in jQuery here is your solution:

$(document).ready(function(){
   $('ul.autoReorder').find('li ul').parent().prependTo('ul.autoReorder');
});

answered Feb 17, 2015 at 16:14

JBA

2,9091 gold badge24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NiteTrip Over a year ago

Thank you. I will change up the code and mark this as the answer if it fills my needs.

Alvaro Montoro Over a year ago

This answer is really nice and much better than mine. I find interesting how it adds them in the right order.

NiteTrip Over a year ago

I agree, this is a really elegant answer. a 1 liner that works perfectly for my needs. Thanks again, poozolax!

Collectives™ on Stack Overflow

Sort unordered list with Javascript / jQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related