Reorder HTML elements by class, not by id

Question

In each example I saw for reordering elements, an identifier is used to replace or insert. However, I get a feed to my site and do not control whether the ID is used. I am trying to use blogger.com to write articles, feedburner to create a feed and display it on my personal website. Here is what I have:

<li> <span class="headline"> <a href="webpage.html">Article Link</a> </span> <p class="date">8/3/2012</p> <div> Brief article intro...</div> </li> 

Here is what I want:

 <li> <p class="date">8/3/2012</p> <span class="headline"> <a href="webpage.html">Article Link</a> </span> <div> Brief article intro...</div> </li> 

I understand the examples I saw like this:

 $("#div2").insertAfter("#div3"); $("#div1").prependTo("#div2"); 

But I'm not sure how to accomplish this in general or in a loop, so that I can only change classes inside the same parent element.

Answer 1

here is the solution

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

it separates the date element and inserts it into the first position in li

Answer 2

Shortest solution i can think of

 $('.date').each( function() { $(this).parent().prepend(this); }) 

DEMO http://jsfiddle.net/xs7UG/