Replace li with div and remove ul using jquery

Question

I have an unordered list like

<ul class="outer">
    <li class="item">
      <div class="image"> ... </div>
      <div class="content"> ... </div>
   </li>

   <li class="item">
     <div class="image"> ... </div>
     <div class="content"> ... </div>
   </li>
   .
   .
   .
   .
</ul>

i need to replace li & ul with div using jquery so it would be like

<div class="outer">
    <div class="item">
      <div class="image"> ... </div>
      <div class="content"> ... </div>
   </div>

   <div class="item">
     <div class="image"> ... </div>
     <div class="content"> ... </div>
   </div>
   .
   .
   .
   .
</div>

tried but as im new i coludn't

here is my Fiddle http://jsfiddle.net/3G7xy/1/

Answer 1

I think it will be better to use wrap/unwrap instead of replace()

$('.mylist ul').wrap('<div class="outer"/>').contents().unwrap();
$('.mylist li').wrap('<div class="item"/>').contents().unwrap();

Demo: Fiddle