追加

Question

我正在尝试使用jquery将字符图像数组放入DOM。

jquery

    for (var i = 0; i < character.length; i ++) {
     let combatantChoice = $('<div>');
     combatantChoice.addClass('col-md-3 
     characterClass');
     $('#combatant-choice').append(combatantChoice);
     let combatantsImage = $('<img>');
     combatantsImage.addClass('character-image');
     combatantsImage.attr('src', character[i].image);
     $('.characterClass').append(combatantsImage);
    }; 

HTML

 <div class="container">
  <div class="row">
   <div id="combatants-area" class="col-md-12">
    <div id="combatant-choice" class="row"></div>      
   </div>
  </div>
 </div>

四个.characterClass的div将按照对象数组的长度显示。

问题在于图像将在.characterClass本身中重复。因此，我最终得到了4张图像，3张图像，2张图像，一张图像。如何停止迭代？

Answer 1

由于此行，它先创建1，然后2，然后3，然后4（依此类推）：

$('.characterClass').append(combatantsImage);

这将选择所有带有“ .characterClass”的div。第一次只有2次，第二次是第一次和第二次，所以现在将它加了两次。

相反，使用：

combatantChoice.append(combatantsImage);

，以便仅将图像附加到循环中正在创建的div。