Question

我正在尝试复制一个表行并根据用户输入1到10附加到我的表。根据输入，我想将多行添加到我的表中..这是我当前的 for loop 。当我运行此代码并进行测试时，jQuery正在克隆指数行并附加。任何帮助将不胜感激！

$(".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>

Answer 1

当您提供与多个元素匹配的参数时，重复归因于.insertAfter()。

在这种情况下，它会再次.clone()，以便在每个匹配的元素之后插入您的克隆。

1个预定克隆* 5个现有行= 5个新克隆已插入

您需要修改选择器以仅匹配一个要插入的元素，例如与:last：

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

此外，虽然它不会导致重复，但您调用.clone()和.first()的顺序是浪费的。它会创建每个现有行的克隆，然后丢弃除第一行之外的所有行。

在克隆之前减少集合的大小更有效：

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

Answer 2

所以，在看了你的javascript之后，我意识到你已经克隆了并且首先倒退了。然后我也意识到你正在添加所选数字，所以如果你选择了4，你就加上4，即使已经有1行。总共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/

为什么jquery first（）。clone（）在一个表中仍然克隆多个元素？

2 个答案: