Question

I’ve got a small problem I’m struggling to solve.
Let’s say I’ve got an unordered list, like:

<ul> 
    <li> //first
       <div id="div1> text </div>
    </li>

    <li> //second
       <div id="div2> text </div>
    </li>

    <li> //third
       <div id="div3> text </div>
    </li>
</ul>

Is there an easy approach to change the order of this list? So, let’s say, the third one would be displayed in the middle?
The problem is I’ve got a lot of stuff under each

and can’t modify the list on the server-side since I don’t have access to logic files :/

Thanks
regards

Answer 1

As long as you know the positions you want to go in and move around you can. Here’s an example:

In this case remove the :eq(2) (third, 0 based) element, then insert it after the first.

$(document).ready(function(){
  $("ul li:eq(2)").remove().insertAfter($("ul li:eq(0)"));
});

<ul> 
    <li>
       <div id="div1"> first </div>
    </li>
    <li>
       <div id="div2"> second </div>
    </li>
    <li>
       <div id="div3"> third </div>
    </li>
</ul>

There are a few other options as well, but the answer is yes you can do this.