0

这可能是一个非常简单的概念，我只是误解了这个 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并在其之前添加该副本，然后复制第一个列表中的项目并复制其中的项目，但我最终得到的项目在两者中都重复，我不希望这样。

4

5 回答 5

1

那是因为您克隆了这些项目。你永远不会将它们从 dom 中删除。我认为您正在寻找detach()。Detach 也会从 dom 中移除元素。

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

演示

$('ul').detach().appendTo('nav');
于 2013-03-28T21:16:45.803 回答
1

$('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')。

于 2013-03-28T21:17:39.340 回答
0

我没有看到问题。

items.appendTo('ul');

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

于 2013-03-28T21:18:31.253 回答
0

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

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

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

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

items.appendTo('ul');

cloner.prependTo('nav');

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

于 2013-03-28T21:19:03.387 回答
0 
// 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)');
于 2013-03-28T21:22:31.057 回答