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

Question

此处，在更改下拉列表(值 1-100)时，所选数量 <tr>克隆它会添加。我尝试过使用几种不同的选择器变体，但我错过了一些东西。当我运行此代码并且用户更改顶部 div 中的下拉列表时，它会将字段添加到第二个 div 中。我知道这是因为类是相同的，我如何克隆它们以使 div 彼此分离？ div“NewTeam”是根据之前所做的选择通过克隆创建的。

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

的 div

感谢您的帮助!

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