Toggling elements order when switching views with jQuery -

i'm working set of elements has both list view (default) , grid view. used unordered list fake table view , able switch grid view without having create different markup. (i want avoid use of absoluted positioned elements on place)

list view

<ul class="list"> <li class="header">     <div class="image">image</div>     <h2 class="name">name</h2>     <p class="date">start date</p>     <p class="title">title</p> </li> <li class="even">     <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>     <h2 class="name">adam ant</h2>     <p class="date">1995</p>     <p class="title">specialist</p> </li> <li class="odd">     <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>     <h2 class="name">brian box</h2>     <p class="date">2005</p>     <p class="title">specialist</p> </li> <li class="even">     <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>     <h2 class="name">clara clock</h2>     <p class="date">2010</p>     <p class="title">manager</p> </li> <li class="odd">     <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>     <h2 class="name">darla dock</h2>     <p class="date">1996</p>     <p class="title">editor</p> </li> 

grid view

<ul class="grid"> <li class="header">    <p class="title">title</p>     <div class="image">image</div>     <h2 class="name">name</h2>     <p class="date">start date</p>  </li> <li class="even">    <p class="title">specialist</p>     <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>     <h2 class="name">adam ant</h2>     <p class="date">1995</p>  </li> <li class="odd">     <p class="title">specialist</p>     <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>     <h2 class="name">brian box</h2>     <p class="date">2005</p>  </li> <li class="even">     <p class="title">manager</p>     <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>     <h2 class="name">clara clock</h2>     <p class="date">2010</p>  </li> <li class="odd"> <p class="title">editor</p>     <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>     <h2 class="name">darla dock</h2>     <p class="date">1996</p>  </li> 

the tricky part order of elements in list view different in grid view. used prependto target elements , change order once view switched grid view. it's working fine far. problem once view switched again list view, elements won't return original order.

i guess easier see fiddle: http://jsfiddle.net/tdf7a/

this is javascript code i'm using switch views , prepend .title element shows before .image element.

$('.controls a').bind('click', function(){ $('.controls a').toggleclass('active'); $('ul').toggleclass('list').toggleclass('grid'); $('ul.grid li').each(function () {     var $this = $(this);     $('.title', $this).prependto($this); });      

});

as can see, image element comes first in list view , second in grid view once try switch list view, image stays in second place , won't return first place should be. know simple achieve jquery. have started fiddle i'm stuck here. appreciate help. in advance.

you can appendto if has list class doing grid class. appendto place title on end begin with.

like this

$('ul.list li').each(function () {     var $this = $(this);     $('.title', $this).appendto($this);  }); 

here's full code. , here's updated fiddle.

$('.controls a').bind('click', function(){     $('.controls a').toggleclass('active');     $('ul').toggleclass('list').toggleclass('grid');      $('ul.grid li').each(function () {         var $this = $(this);         $('.title', $this).prependto($this);     });          $('ul.list li').each(function () {         var $this = $(this);         $('.title', $this).appendto($this);      }); });