当前位置：首页 > news >正文

jQuery学习——克隆

news 来源：原创 2024/5/5 18:15:45

.clone()

描述: 创建一个匹配的元素集合的深度拷贝副本。

添加的版本: 1.0.clone( [withDataAndEvents ] )
- withDataAndEvents (默认: false)
  
  类型: Boolean
  
  一个Boolean值，表示是否会复制元素上的事件处理函数。从jQuery 1.4开始，元素数据也会被复制。
添加的版本: 1.5.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
- withDataAndEvents (默认: false)
  
  类型: Boolean
  
  一个Boolean值，表示是否会复制元素上的事件处理函数。默认值是 false。 *对于1.5.0的默认值被不适当地设置成了true，将在1.5.1以上改回false 。
- deepWithDataAndEvents (默认: value of withDataAndEvents)
  
  类型: Boolean
  
  一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值（默认值是 false）

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。出于性能方面的考虑，表单元素动态的状态（例如，用户将数据输入到input和 textarea，或者用户在select中已经选中某一项）不会被复制到克隆元素。克隆操作将设置这些字段为HTML中指定的默认值。

注意: 使用.clone()可能产生id属性重复的元素的副作用，id应该是唯一的。在可能的情况下，建议，应避免克隆有此属性或标识符的元素，使用类（class）属性代替。

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

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
  <b>Hello</b><p>, how are you?</p>
 
<script>
  $("b").clone().prependTo("p");
</script>
 
</body>
</html>

当使用 `.clone()`克隆一组元素，并且这些克隆生成的元素尚未被添加到 DOM 中，那么当这些元素被插入到 DOM 中时，不能保证是按它们的原顺序被插入的。但是，可以像下面例子中提到的那样，保证顺序的正确性：

<!DOCTYPE html>
<html>
<head>
  <style>
  #orig, #copy, #copy-correct {
    float: left;
    width: 20%;
  }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div id="orig">
    <div class="elem"><a>1</a></div>
    <div class="elem"><a>2</a></div>
    <div class="elem"><a>3</a></div>
    <div class="elem"><a>4</a></div>
    <div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>
 
<script>
// sort order is not guaranteed here and may vary with browser
$('#copy').append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('foo - ')
          .parent()
          .clone());
 
// correct way to approach where order is maintained
$('#copy-correct')
          .append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('bar - ')
          .end());
</script>
 
</body>
</html>