1

这个例子来自一本书。它告诉我，如果我将 clone() 中的参数设置为 false，我可以克隆没有文本的段落。我查看了 jQuery 中的文档，并尝试了所有真假组合。结果证明我不能复制没有文字的段落。它只是jQuery中的一个错误吗？

<html>
    <head>
        <title>Copying element</title>
        <script src="../jquery-1.8.0.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //copy elment and insert
                $('div.chapter p:eq(0)').clone(false).insertBefore('div.chapter');

            });
        </script>
        <style type="text/css">
            span.footnote{
                font-style:italic;
                display:block;
            }
            .chapter span.footnote{
                display:inline;
            }
            .chapter p{
                width:50%;
            }
        </style>
    </head>
    <body>
        <h1 id="f-title">Flatland: A ROmance of Many Dimension</h1>
        <div id="f-author">by Edwin A. Abbott</div>
        <h2>Part 1, Section 3</h2>
        <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
        <div id="excerpt">an excerpt</div>
        <div class="chapter">
            <p class="squre">Our professional Men and Gentlemen are Squares (to which class I myself belong) and FIve-Sided Figures
                or Pentagons.
            </p>
            <p class="mobility hexagon">Next above these come the Nobility of whoem there are serverl degress
                <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>and from thence rising in the number of theirside till they received the honourable title of 
                <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>
            </p>
            <p><span class="pull-quote">It is a <span class="drop">Law of Nature</span>with us that a mable child shall have </span>    
            </p>
            <p>But this rule applies not always to the Tradesman</p>
            <p>Rarely -- in proportion to the vast numbers of Isosceles
            </p>
            <p>The birth of tha Ture Equlaterial Traignel from Isoscele parents is the subject of rejociing in the coutry for many furlongs.
            </p>
            <p>How admirable is the Law of Compensation!
            </p>
        </div>
    </body>
</html>
4

4 回答 4

3

重新阅读克隆文档。

它指定元素与它的内容一起被复制（深拷贝）。布尔参数仅处理事件处理程序和jquery 数据，而不是嵌入元素。

所以这是正常的行为：div.chapter() 中的第一段$('div.chapter p:eq(0)')与其内容一起被复制。

如果你想要一个非深度克隆功能，你可以使用这个：

// clone an element with attributes, without the weight of calling clone and emptying it
// (call it on a non jquery element, using  [0] if necessary)
function nondeepclone(element) {
    var newelem = document.createElement(element.tagName);
    for (var i = 0; i < element.attributes.length; i++) {
        var attr = element.attributes[i];
        newelem.setAttribute(attr.name, attr.value);
    }
    return newelem;
}

但我不确定这是否有真正的用途。

于 2012-08-22T18:54:27.653 回答
1

我不认为你可以克隆没有文本的段落。但是您可以在克隆它后立即通过将其文本设置为空白来清除它。（或使用 .empty() 作为jackwanders的建议）

见：http: //jsfiddle.net/sQF62/1/

请参阅：没有内容的文本框的 Jquery 克隆

于 2012-08-22T18:55:50.973 回答
1

我想你想要的是：

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

这将克隆段落，删除其子项，然后插入它。 .clone(false)only 意味着附加到原始元素的数据和事件不会被复制到克隆。

于 2012-08-22T19:00:45.553 回答
1

我认为您正在寻找的是-

  $(document).ready(function(){
    //copy element and insert               
    var clone = $('div.chapter p:eq(0)').clone().empty();
    clone.insertBefore('div.chapter');

  });

clone() 之后的 empty() 方法删除所有子元素，即所选 HTML 元素的数据。

于 2012-08-23T17:05:58.620 回答