将元素从 div 克隆到列表答案

【问题标题】：Clone element from div to list将元素从 div 克隆到列表
【发布时间】：2014-09-10 17:33:54
【问题描述】：

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

 <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 文件中，<div> 内容在 footer.phtml 中，所以我不确切知道我需要多少 id（这就是为什么我无法使用 php 获取菜单项 - 忘记标准“从数据库获取”它的 Zend ......）。也许我需要生成或只是获取一些“数组”？

如果有任何帮助，我将不胜感激！

【问题讨论】：

重复 ID 似乎是您的问题中最少的一个，列表元素不能是 DIV 的子元素，因此标记可能甚至不是您认为的那样，因为浏览器在大多数情况下都会尝试修复这样的问题。
说到重复的id...如果问题是li的计数可能不同，为什么不设置一个类而不是一个id？

标签： javascript jquery css tabs insertafter

【解决方案1】：

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

Fiddle.

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

【讨论】：