Question

这个例子来自一本书。它告诉我，如果我将clone（）中的参数设置为false，我可以在没有文本的情况下克隆段落。我查看了jQuery中的文档，我尝试了所有的true和false组合。结果证明我无法复制没有文字的段落。它只是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>

Answer 1

重新阅读clone documentation。

它指定复制元素及其内容（深层复制）。布尔参数仅处理事件处理程序和jquery data，而不是嵌入元素。

所以这是正常的比较：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;
}

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

Answer 2

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

请参阅：http://jsfiddle.net/sQF62/1/

请参阅：Jquery clone of a textbox without the content

Answer 3

我认为你想要的是：

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

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

Answer 4

我认为你在寻找的是 -

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

  });

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

无法使用jquery克隆没有文本的段落

4 个答案: