Question

Every example I have seen of reordering elements uses ID’s to swap or insert. However, I am getting a feed onto my site and don’t have control over whether an ID is used. I am trying to use blogger.com to write articles, feedburner to create the feed, and have it display 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 examples I’ve seen like so:

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

But I’m not sure how to accomplish this generically or in a loop so that I can swap only classes within a single parent element.

Answer 1

here’s a solution

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

it detaches the date element and inserts it at the first position in the li