jQuery参考实例 1.13 复制DOM元素

来源：互联网发布：innocent grey 知乎编辑：程序博客网时间：2024/04/28 11:36

原文：

http://www.lifelaf.com/blog/?p=229

本文翻译自jQuery Cookbook (O’Reilly 2009) 1.13 Cloning DOM Elements

需求

复制DOM树中的一部分

解决方案

jQuery提供了一个叫做clone()的方法来复制DOM元素。该方法的使用也是很直截明了的：只需在选中的DOM对象上调用clone()方法即可。clone()方法执行后，返回的是原来那个DOM对象的复制品。在下面的代码中，<ul>元素先被复制一次，然后其复制品用appendTo()方法插入到DOM树中。在这里，与原来的<ul>元素一模一样的<ul>被加入到页面中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body>  <ul>    <li>list</li>    <li>list</li>    <li>list</li>    <li>list</li>  </ul>  <script type="text/JavaScript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <script type="text/JavaScript">    jQuery('ul').clone().appendTo('body');  </script></body></html>

讨论

当需要在DOM树中移动某些DOM片段的时候，clone()方法非常好用，尤其是当这些DOM片段的事件监听逻辑也需要被复制的时候。来看一下下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body>  <ul id="a">    <li>list</li>    <li>list</li>    <li>list</li>    <li>list</li>  </ul>  <ul id="b"></ul>  <script type="text/JavaScript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <script type="text/JavaScript">    jQuery('ul#a li')      .click(function(){alert('List Item Clicked')})    .parent()      .clone(true)        .find('li')        .appendTo('#b')     .end()   .end()   .remove();</script></body></html>

如果在浏览器中运行，上面的代码会复制页面中的<li>元素，并将复制出来的<li>元素（连同其事件响应机制）插入到空的<ul>元素中，最后移除之前被复制的那个<ul>元素。

对于刚接触jQuery的开发人员来说，上面的代码不那么好懂。让我们一步一步的来看一下上面的代码到底是怎么运行的：

jQuery(‘ul#a li’) = 选择id值为a的<ul>元素，然后选择该<ul>元素内所有的<li>元素。
.click(function(){alert(‘List Item Clicked’)}) = 对每个<li>元素，监听其鼠标点击事件。
.parent() = 以之前选择的<li>元素为起点，遍历DOM树来选中它们的父元素<ul>。
.clone(true) = 复制该<ul>元素及其所有的子元素。通过向clone()方法传入布尔值，可以复制这些元素上的事件监听机制
.find(‘li’) = 在复制出来的元素集中查找li元素，并选中它们。
.appendTo(‘#b’) = 将这些复制出来的li元素插入到id值为b的<ul>元素中。
.end() = 撤销最近一次的元素集更改操作，返回之前选中的元素集 — 复制出来的<ul>元素。
.end() = 再一次撤销之前的元素集更改操作，返回初始的那个被复制的<ul>元素。
.remove() = 移除该<ul>元素

很明显，对于复杂的jQuery操作语句，理解DOM元素的选择和更改操作的撤销，是非常重要的。