.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。

來源

2017-07-28 Ahtisham Shahid

第一次你的身體只有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"); 
    }); 
});

來源

2017-07-28 06:35:48

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

來源

2017-07-28 06:33:09

代碼只回答不好。 – 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>

來源

2017-07-28 06:34:14

這並不克隆所有**段落，只有第一個。 –

編輯答案請檢查 –

得到所需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。

來源

2017-07-28 06:34:43 Bernhard

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

來源

2017-07-28 06:56:10 danactive

.clone（）創建多個副本

回答

相關問題