jQuery参考实例 1.13 复制DOM元素

本文翻译自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的开发人员来说,上面的代码不那么好懂。让我们一步一步的来看一下上面的代码到底是怎么运行的:

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

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

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!