.clone（）创建多个副本

问题描述：

$(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。

第一次你的身体只有2个p标签。你克隆并附加到身体。现在你的身体有4个p标签。如果你通过身体搜索，你会得到所有4个p标签。如果你现在克隆，克隆4个标签。在你追加之后，现在你在身体中留下了8个标签。问题是，你想在点击事件中考虑所有的身体标签还是只考虑特定的2 p标签？ – Sidtharthan

嗨@Ahtisham Shahid，如果任何答案解决了您的问题，您应该接受它。这将有助于其他具有相同问题的用户找到修补程序 –

答

发生这种情况是因为第二次$("p")会匹配，并克隆4段，第二次8等等。你需要做一些事情来“标记”原来的或副本。例如，你可以标记一个CSS类的“新”项目，并筛选它们，就像我在这个小提琴做https://jsfiddle.net/sfarsaci/kb0k7nrx/

$(document).ready(function() { 
    $("button").click(function() { 
    $("p:not(.copy)").clone().addClass('copy').appendTo("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(){ 
 
     $("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>

代码只回答不好。 – prasanth

你应该解释你在那里做什么，以帮助OP了解他做错了什么，以及有什么修复 –

答

使用任何类来获取段落和追加到身体。不要使用将返回页面中所有可用标签的标签选择器。

<!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>

这并不克隆所有**段落，只有第一个。 –

编辑答案请检查 –

答

得到所需P标签A级标签。

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

，改变你的jQuery这个

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

这将复制最后复制的P-Tag和最后复制的P标签后，将其插入。

例子：

$("#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。

答

“P”将选择不限制所有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（）创建多个副本

相关推荐