javascript - 在大量 div 中插入图像源(最好的方法)

Question

所以我用 html 和 css 制作了一个机架:

<div id="achterkant">
  <div class="rack">
    <div class="rackRow">
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
    </div>
    <div class="rackRow">
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
    </div>
    <div class="rackRow">
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
    </div>
    <div class="rackRow">
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
    </div>
    <div class="rackRow">
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
    </div>
    <div class="rackRow">
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
      <div class="rackSlot"></div>
    </div>
  </div>
</div>

在所有这些rackSlots 中，都需要有一个我从API 获取的图像(只是一个链接)。我把这些放在一个数组中。有没有一种方法可以将图像插入到带有类rackslot的第一个div中，其中没有图像？ 我认为我应该这样做:

   for (i = 0; i < 36; i++){
       $('first rack slot with no images').prepend('<img src="'myarrayofimages[i]'"/>');
   }

Answer 1

首先，请注意您的字符串连接有缺陷 - 您缺少用于连接值的 +。

要实现您的要求，您可以使用 :empty:first 来选择所需的 .rackSlot 元素:

for (i = 0; i < 36; i++){
  $('.rackSlot:empty:first').prepend('<img src="' + myarrayofimages[i] + '"/>');
}

如果您想让它更精确一点，您可以显式检查它是否不包含 img 元素:

for (i = 0; i < 36; i++){
  $('.rackSlot:not(:has(img)):first').prepend('<img src="' + myarrayofimages[i] + '"/>');
}