5.3　复制元素

本章到目前为止已经示范的操作包括：插入新创建的元素、将元素从文档中的一个位置移动到另一个位置，以及通过新元素来包装已有的元素。可是，有时候也会用到复制元素的操作。例如，可以复制出现在页面顶部的导航菜单，并把副本放到页脚上。实际上，无论何时，只要能通过复制元素增强页面的视觉效果，都是以重用代码来实现的好机会。毕竟，如果能够只编写一次代码并让jQuery替我们完成复制，何必要重写两遍同时又增加双倍的出错机会呢？

在复制元素时，需要使用jQuery的.clone()方法，这个方法能够创建任何匹配的元素集合的副本以便将来使用。与本章前面使用$()创建元素时一样，在为复制的元素应用一种插入方法之前，这些元素不会出现在文档中。

例如，下面这行代码将创建<div class="chapter">中第一段落的副本：

  1. $('div.chapter p:eq(0)').clone();

但仅创建副本还不足以改变页面的内容。要想让复制的内容显示在网页中，可以使用插入方法将其放到<div class="chapter">前面。

  1. $('div.chapter p:eq(0)').clone().insertBefore('div.chapter');

这样，同一个段落就会出现两次。可见，.clone()与插入方法的关系就如同复制和粘贴一样。

　连同事件一起复制

在默认情况下，.clone()方法不会复制匹配的元素或其后代元素中绑定的　　事件。不过，可以为这个方法传递一个布尔值参数，将这个参数设置为true，就可以连同事件一起复制，即.clone(true)。这样一来，就可以避免每次复制之后还要手工重新绑定事件的麻烦（第3章曾讨论过）。

通过复制创建突出引用

很多网站都和它们的印刷版一样，使用了突出引用（pull quote）来强调小块的文本并吸引读者的眼球。所谓突出引用，就是从正文中提取一部分文本，然后为这段文本应用特殊的图形样式。通过.clone()方法可以轻而易举地完成这种装饰效果。首先，我们来看一看例子文本的第三段：

  1. <p>
  2.   <span class="pull-quote">It is a Law of Nature
  3.   <span class="drop">with us</span> that a male child shall
  4.   have <strong>one more side</strong> than his father</span>,
  5.   so that each generation shall rise (as a rule) one step in
  6.   the scale of development and nobility. Thus the son of a
  7.   Square is a Pentagon; the son of a Pentagon, a Hexagon; and
  8.   so on.
  9. </p>

我们注意到这个段落以<span class="pull-quote">元素开始，其中的类是为了复制而准备的。当把复制的<span>中的文本粘贴到其他位置上时，还需要修改它的样式属性，以便它与原来的文本区别开来。

要实现这种样式，需要为复制的<span>添加一个pulled类，并在样式表中为这个类添加如下样式规则：

  1. .pulled {
  2.   position: absolute;
  3.   width: 120px;
  4.   top: -20px;
  5.   right: -180px;
  6.   padding: 20px;
  7.   font: italic 1.2em "Times New Roman", Times, serif;
  8.   background: #e5e5e5;
  9.   border: 1px solid #999;
  10.   border-radius: 8px;
  11.   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
  12. }

这样，就为pull-quote添加了浅灰色的背景、一些内边距和不同的字体。更重要的是将它绝对定位到了在DOM中（绝对或相对）定位的最近祖先元素的上方20px、右侧20px。如果祖先元素中没有应用定位（除了static）的元素，那么pull-quote就会相对于文档中的<body>元素定位。为此，需要在jQuery代码中确保复制的pull-quote的父元素应用了position:relative样式。

　计算CSS位置

虽然pull-quote盒子的上沿位置比较直观，但说到它的左边位于其定位的父元素右侧20像素时，恐怕就没有那么好理解了。要得到这个数字，需要先计算pull-quote盒子的总宽度，即width属性的值加上左右内边距，或者说145px + 5px + 10px，结果是160px。当为pull-quote设置right属性时，值为0会使pull-quote的右边与其父元素的右边对齐。因此，要使它的左边位于父元素右侧20px，需要在相反的方向上将它移动比其总宽度多20px的距离，即-180px。

现在我们再回到jQuery代码中，看看怎么应用样式。首先，从匹配所有<span class="pull-quote">元素的选择符表达式开始，然后为选择的元素应用position:relative样式，参见代码清单5-17。

代码清单5-17

  1. $(document).ready(function() {
  2.   $('span.pull-quote').each(function(index) {
  3.     var $parentParagraph = $(this).parent('p');
  4.     $parentParagraph.css('position', 'relative');
  5.   });
  6. });

这里，我们同样把需要多次用到的选择符表达式保存在变量$parentParagraph中，以提升性能和可读性。

接下来就是创建突出引用本身，以便利用准备好的CSS样式。此时，我们先复制每个<span>元素，然后为得到的副本添加pulled类，最后再把这个副本插入到其父段落的开始处，参见代码清单5-18。

代码清单5-18

  1. $(document).ready(function() {
  2.   $('span.pull-quote').each(function(index) {
  3.     var $parentParagraph = $(this).parent('p');
  4.     $parentParagraph.css('position', 'relative');
  5.     var $clonedCopy = $(this).clone();
  6.     $clonedCopy
  7.       .addClass('pulled')
  8.       .prependTo($parentParagraph);
  9.   });
  10. });

这里，我们又定义了一个新变量$clonedCopy，以便后面使用。

因为前面已经为这个复制的元素设置了绝对的定位，因此它在段落中的位置是无所谓的。根据CSS规则中的设置，只要它处于这个段落的内部，它就会相对于段落的上边和右边进行定位。

目前，段落与其中插入的突出引用的外观如图5-10所示。

5.3　复制元素 - 图1

图　5-10

这个开头不错。在接下来的任务中，我们对突出引用的内容进行一番整理。