Question

这可能是一个非常简单的概念，我只是误解了，但是接受了这个jsFiddle：

HTML

<nav>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</nav>

JS

var items = $('ul li').clone();

var cloner = $('ul').clone().addClass('before');

cloner.prependTo('nav');

items.appendTo('ul');

http://jsfiddle.net/WZykS/3/

为什么ul我克隆的物品有1,2,3,1,2,3 ......不应该只是1,2,3 ???

我正在尝试复制当前的ul并在它之前添加副本然后复制第一个列表中的项目并复制其中的项目但我最终得到了两者中重复的项目，我不知道我想要那个。

Answer 1

那是因为你克隆这些项目。你永远不会从dom中删除它们。我想你正在寻找detach()。分离也会删除dom中的元素。

这也将移动ul元素中的所有li元素。但请记住，这会将所有 ul元素定位到您的网页上并将其移至导航（制作更具体的选择器。就像ID或类一样）。

Demo

$('ul').detach().appendTo('nav');

Answer 2

$('ul').clone()将克隆<ul> 和所有子项。因此，当您执行cloner.prependTo('nav')时，您要将<ul>及其<li>添加到DOM中。

然后你做items.appendTo('ul')。这会将已克隆的3 <li>追加到页面上所有 <ul>的位置。

无需var items = $('ul li').clone()或items.appendTo('ul')。

Answer 3

我没有看到问题。

items.appendTo('ul');

将项目1,2,3添加到<ul />，而不仅仅是第一个/最后一个。

Answer 4

那是因为您将项目添加到最后一行的两个列表中。 ul选择器将匹配两个列表。

如果您交换代码中的最后两行，则只会将项目添加到当时存在的一个列表中：

var items = $('ul li').clone();

var cloner = $('ul').clone().addClass('before');

items.appendTo('ul');

cloner.prependTo('nav');

http://jsfiddle.net/Guffa/WZykS/5/

Answer 5

// this creates a copy of each li
var items = $('ul li').clone();

// this clones the ul (and its children) and adds the class
var cloner = $('ul').clone().addClass('before');

// the cloned ul (with its children) are prepended to the nav element
cloner.prependTo('nav');

// the copied li are now appended to all found "ul" elements.
items.appendTo('ul');

做你想做的最快捷的方法是：

$('ul').clone().prepandTo('nav');

或者如果你真的想清除它并再次添加它们：

$('ul').clone().empty().prependTo('nav');
$('li').clone().appendTo('ul:nth-child(1)');

jQuery克隆太多了？

5 个答案: