.clone()

.clone( [ withDataAndEvents ] ) 官网原E文: jQuery

描述:深度复制匹配的元素。

  • version added: 1.0.clone( [ withDataAndEvents ] )

    withDataAndEvents一个Boolean值(true 或者 false)指示事件处理函数是否会被复制。对已jQuery 1.4,元素数据也会被复制。

  • version added: 1.5.clone( [ withDataAndEvents ], [ deepWithDataAndEvents ] )

    withDataAndEvents一个Boolean值(true 或者 false)指示事件处理函数是否会被复制。对已jQuery 1.4,元素数据也会被复制。 默认值是 false*对于1.5.0的默认值是不正确true 。这将在1.5.1以上改回false

    deepWithDataAndEvents一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值( 默认值是 false

.clone()方法深度复制所有匹配的元素,包括所有匹配元素、匹配元素的下级元素、文字节点。 当和插入方法联合使用时,.clone()对于复制页面上的元素很方便。请看下面的HTML:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

像我们讨论.append()一样,通常我们将页面上一个元素插入到DOM里另立个地方,它会被从老地方移走:

$('.hello').appendTo('.goodbye');

得到的DOM结构如下:

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

但是我们如果需要的是复制而不是移除,我们可以像下面这样写代码:

$('.hello').clone().appendTo('.goodbye');

结果会是:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

当我们用.clone()方法时,我们可以修改被复制的元素或者元素内容,在将它插入到文档之前。

通常,任何绑定绑定在原始元素上的事件处理函数都不会被复制到克隆元素。可选的withDataAndEvents 参数允许我们改变该行为, 从而将所有绑定在原始元素上的事件处理函数复制到克隆元素上。对于jQuery 1.4,所有元素数据( .data()方法返回的内容)同样被复制到新的克隆元素。

在jQuery 1.5,withDataAndEvents可以选择性增强deepWithDataAndEvents复制元素的事件和数据的克隆的所有子元素。

Example:

复制所有 b 元素然后将他们插入到所有段落里面的前面。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
  <b>Hello</b><p>, how are you?</p>

<script>
  $("b").clone().prependTo("p");
</script>

</body>
</html>

Demo:

jQuery 1.6 API 中文版Clove整理、修订