Clone element from div to list

Question

I need to build simple tabs menu. The problem is that I must generate somethink like that ...

 <ul id="menu">
  <li class="First">First</li>
  <li class="Second">Second</li>
  <li class="Third">Third</li>
</ul>

...from somethink like that

<div class="someclass">
     <li class="First">First</li>
    <p>text</p>
    </div>
<div class="someclass">
     <li class="Second">Second</li>
    <p>text</p>
    </div>
<div class="someclass">
     <li class="Third">Third</li>
    <p>text</p>
    </div>

I tried to solve this broblem with my pure knowledge in js...

<div id="PutAfter">  
<ul id="menu">
  <li id="m">First</li>
  <li id="m">Second</li>
  <li id="m">Third</li>
</ul>
   <div style="display:none"> 
<div class="someclass">
     <li id="m">4</li>
    <p>text</p>
    </div>
<div class="someclass">
     <li id="m">5</li>
    <p>text</p>
    </div>
    <div class="someclass">
     <li id="m">6</li>
    <p>text</p>
    </div>
    </div>

and simple script

$(document).ready(function(){
     $('#4').clone().insertAfter($('#m3'));
     $('#5').clone().insertAfter($('#4'));
     $('#6').clone().insertAfter($('#5'));
});

As you can see there is big problem - duplicates in ids :( I cant generate ids for <li> elements i script because menu load in header.phtml file and <div> content in footer.phtml so I dont know exactly how much ids I need (thats why I cant get menu items using php - forget about standart "get from db" its Zend...). Maybe I need to generate or just get some "array"?

I would be really grateful for any help!

Answer 1

You can select all li inside .someclass elements, clone them and add to newly created ul, adding then it to body.

Fiddle.

$(document).ready(function()
{
    var ul = $('<ul>', { id: "menu" });
    ul.append($('.someclass li').clone());
    $("body").append(ul);
});