从div到list克隆元素

时间:2014-09-10 17:33:54

标签: javascript jquery css tabs insertafter

我需要构建简单的标签菜单。问题是我必须产生这样的想法......

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

...从某种想法那样

<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>

我试图用我在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>

和简单的脚本

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

正如你所看到的那样有一个很大的问题 - 在id中重复:(我无法生成<li>元素的id我脚本,因为header.phtml文件中的菜单加载和footer.phtml中的<div>内容所以我不知道我需要多少ID(这就是为什么我不能使用php获取菜单项 - 忘记标准“从db获取它的Zend ...)。也许我需要生成或只是得到一些”数组“?

我真的很感激任何帮助!

1 个答案:

答案 0 :(得分:0)

您可以选择li元素内的所有.someclass,克隆它们并添加到新创建的ul,然后将其添加到body

Fiddle

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