爲什麼jquery first（）。clone（）中的表仍然克隆了多個元素？

我想重複一個表格行，並根據用戶輸入的1到10添加到我的表格中。基於輸入，我想將很多行添加到我的表格中。這裏是我當前的for循環 。當我運行這段代碼並進行測試時，jQuery克隆了指數數量的行並追加。任何幫助，將不勝感激！爲什麼jquery first（）。clone（）中的表仍然克隆了多個元素？

$(".RosterCountSelect").change(function(){ 
    var numOfPlayers = this.value; 
    for (var i = 0; i < numOfPlayers; i++){ 
     $(".PlayerRow").clone().first().insertAfter(".PlayerRow"); 
    } 
});

這裏是HTML標記。

<form id="PlayerInfo"> 
    <table> 
    <tr class = "PlayerRow"> 
    <td><input class="teamInput" type="text" placeholder="Player Full Name" /></td> 
    <td><input class="teamInput" type="text" placeholder="Player Number" /></td> 
    <td>   <input class="teamInput" type="text" placeholder="Jersey Size" /></td> 
    <td>    <input class="teamInput" type="text" placeholder="Short Size" /></td> 
    <td>  <input class="teamInput" type="text" placeholder="Male/Female" /></td> 
    </tr> 
    </table> 
</form>

來源

2016-04-04 Alim Charaniya

你是克隆，然後再克隆在循環中的克隆，這就是爲什麼你有倍數 – Tasos

剛一個友好的提示，你可能想要閱讀本頁：[如何 - 問問指南]（https://stackoverflow.com/help/how-to-ask），所以你可以永遠保證你的問題很容易儘可能地回答並儘可能清楚。一定要包括你爲解決你遇到的問題所做的任何努力，以及當你嘗試修復這些問題時發生了什麼。另外不要忘記你的代碼和任何錯誤信息！ –

你能準確地告訴我我在哪些信息中忽略了哪些部分？ –

所以，看你的JavaScript後，我意識到你有克隆和第一倒退。然後，我也意識到，無論選擇的數字是多少，所以如果選擇了4，即使已經有1行，也會添加4。所以總數爲5.我還意識到，您將添加到具有PlayerRow類的每一行，從而進行多次插入。

於是，我改變了你的代碼，現在你的Javascript看起來是這樣的：

$(".RosterCountSelect").change(function(){ 
    var numOfPlayers = this.value; 
    c=$('.PlayerRow').length; //How many rows are already shown? 
    for (var i = c; i < numOfPlayers; i++){ 
     $(".PlayerRow").first().clone().insertAfter(".PlayerRow:last"); //Cloning only after the LAST one, before it would clone for every row you had with the class PlayerRow. 
    } 
});

的jsfiddle：https://jsfiddle.net/gregborbonus/tu35mpnc/2/

來源

2016-04-04 00:30:07

的重複是由於.insertAfter()當您提供的多個元素相匹配的參數。

在這種情況下，它會再次.clone()爲了在每個匹配元素後插入你的克隆。

1目標克隆* 5個現有行= 5個的新的克隆插入

您會想要修改的選擇器只有一個元素匹配之後插入，例如與:last：

$(".PlayerRow").clone().first().insertAfter(".PlayerRow:last");

而且，儘管它沒有對複製貢獻，被稱爲你有.clone()和.first()順序是一種浪費。它創建每個現有行的克隆，然後丟棄除第一個以外的所有行。

這是更有效的克隆之前減少集合的大小：

$(".PlayerRow").first().clone().insertAfter(".PlayerRow:last");

來源

2016-04-04 00:29:26

爲什麼jquery first（）。clone（）中的表仍然克隆了多個元素？

回答

相關問題