Question

假设我有以下代码：

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

现在，当我$("ul").clone();时，它会克隆完整的ul元素（也是所有子元素）。我只想克隆<ul>而不是它的孩子。

如何在jQuery中执行此操作？

我知道纯JavaScript（使用cloneNode()），但由于还要执行其他方法，我无法使用它。

Answer 1

你可以清空元素：

$('ul').clone().empty();

Answer 2

使用.html('')清空内容。试试这个：

 $("ul").clone().html('');

<强> Working Demo

Answer 3

jQuery clone方法创建元素的深层副本。

描述：创建匹配元素集的深层副本。

因此，使用jQuery，您希望能够获得ul。

您有两种选择：

清空对象jQuery返回：

$('ul').clone().empty();
使用普通的Javascript：

var simpleUl = $($('ul').get(0).cloneNode());

Answer 4

给定解决方案存在两个问题。

通过克隆所有儿童及其数据，它们会产生不必要的低效率。
他们使用的是原生克隆，它不会克服事件处理程序和其他数据。

如果您想使用jQuery进行浅层克隆并传输所有数据，请在克隆操作之前分离其内容，然后在之后替换它们。

// Fetch the ul and detach its contents
var ul = $("ul");
var contents = ul.contents().detach();

// Do the clone, copying its data
var clone = ul.clone(true);

// Reattach the contents
ul.append(contents);

如果有多个元素，则在循环中执行此操作。

为什么jquery克隆了children元素呢？

4 个答案: