jquery - jQuery克隆太多？

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()。Detach 也会从 dom 中移除元素。

这也会移动 ul 元素中的所有 li 元素。但是请记住，这将针对您页面上的所有ul 元素并将它们移动到 nav （制作更具体的选择器。如 id 或类）。

演示

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

Answer 2

$('ul').clone()将克隆<ul> 及其所有子项。因此，当您这样做时，cloner.prependTo('nav')您正在将<ul>其添加<li>到 DOM 中。

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

不需要var items = $('ul li').clone()or 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)');