Question

$(document).ready(function(){
    $("button").click(function(){
        $("p").clone().appendTo("body");
    });
});

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Clone all p elements, and append them to the body element</button>

</body>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").clone().appendTo("body");
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Clone all p elements, and append them to the body element</button>

</body>
</html>

此代码生成段落的克隆，但克隆数量呈指数增长，就像第一次点击它创建1副本第二次点击创建2个克隆等等，如何修复它所以每次创建一个副本，以及如何为动态创建的每个新元素分配新的ID。

Answer 1

这是因为第二次$("p")将匹配，克隆，4段，第二次8，依此类推。你需要做一些事情来“标记”原始的或副本。例如，您可以使用css类标记“新”项并过滤它们，就像我在这个小提琴中所做的那样https://jsfiddle.net/sfarsaci/kb0k7nrx/

$(document).ready(function() {
  $("button").click(function() {
    $("p:not(.copy)").clone().addClass('copy').appendTo("body");
  });
});

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div p").clone().appendTo("body");
    });
});
</script>
</head>
<body>

<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

<button>Clone all p elements, and append them to the body element</button>

</body>
</html>

Answer 3

使用任何类来获取段落并附加到正文。不要使用标签选择器，它将返回页面中可用的所有标签。

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".para").clone().appendTo("body");
        });
    });
    </script>
    </head>
    <body>

    <p class="para">This is a paragraph.</p>
    <p class="para">This is another paragraph.</p>

    <button>Clone all p elements, and append them to the body element</button>

    </body>
    </html>

Answer 4

为所需的p-Tag提供类标记。

<p class="foo">This is a paragraph.</p>

并将您的jQuery更改为此

$('.foo:last').clone().insertAfter('.foo:last');

这将复制最后复制的p-Tag并在最后复制的p-Tag之后插入。

示例：

$("#copy").click(function() {
  $('.foo:last').clone().insertAfter('.foo:last');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="copy">copy</button>
<p class="foo">This is a paragraph.</p>

您可以使用

访问项目

$('.foo').eq(n).html();

.eq（n）给出了类的第n个元素。所以你可能不需要额外的ID。

Answer 5

＆＃34; P＆＃34;将无限制地选择所有p元素，因此jQuery将包含所有段落元素。这是性能不佳并且会选择太多，正如您所提到的，第二次按键点击具有超过预期的p元素。

让我们通过将它们包装在HTML容器中来隔离你的p元素。

<section id="cloneSource">
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</section>

更新你的jQuery以选择容器，包括

中的段落

$("#cloneSource").clone().appendTo("body"); // without new IDs

为了获得最佳性能，您希望在放入DOM之前虚拟编辑HTML内容。

$("#cloneSource").clone().attr("id", "newId").appendTo("body");

生成的身体元素

<section id="cloneSource">
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</section>

<button>Clone all p elements, and append them to the body element</button>

<section id="newId">
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</section>

.clone（）创建多个副本

5 个答案: