Question

此处，在更改下拉列表（值1-100）时，将添加所选的<tr>克隆数。我试图利用几种不同的选择器变体，但我遗漏了一些东西。当我运行此代码，并且用户更改顶部div中的下拉列表时，它会将字段添加到第二个div。我知道这是因为类是相同的，我怎么能克隆这些以使div彼此分开？ div＆＃34; NewTeam＆＃34;是基于之前做出的选择克隆创建的。

我希望给定div中的下拉列表只在同一个div中向表中添加行。请记住，根据用户输入，可能有两个以上的div newTeam

感谢您的帮助！

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

HTML标记

 <div class="newTeam">
 <fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload " id="TeamFieldset" style = "display: none">
  <div class="vfb-legend">
     <h4 style="padding-left: 40px;">New Team - <input class = "TeamName" style = "width:200px" type = "text" placeholder = "Team Name (eg: Girls 5th Grade)"/></h4>
     <label>Roster Count:</label><select class="RosterCountSelect">
     </select>
     <form>
        <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>
  </div>
</fieldset>
 </div>
 <div class="newTeam">
 <fieldset class="teamInfo" id= "TeamFieldset">
  <div class="vfb-legend">
     <h4 style="padding-left: 40px;">New Team - <input class = "TeamName" style = "width:200px" type = "text" placeholder = "Team Name (eg: Girls 5th Grade)"/></h4>
     <label>Roster Count:</label><select class="RosterCountSelect">
     </select>
     <form>
        <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>
  </div>
</fieldset>
</div>

Answer 1

您只能选择一个用于消除的类。

$($('.newTeam')[0])
$($('.newTeam')[1])
...

我不确定，但试试这个。

  $(".RosterCountSelect").change(function(){
    var numOfPlayers = this.value;
    var playerRow = $(this).parent('.newTeam').children('.PlayerRow');
    var playerRowlast = $(this).parent('.newTeam').children('.PlayerRow:last');
    c=playerRow.length; //How many rows are already shown?
    for (var i = c; i < numOfPlayers; i++){ 
        playerRow.first().clone().insertAfter(playerRowlast); 
    }
});

如何从同一个类的不同div中选择元素？

1 个答案: