javascript - 如何根据另一个div的长度添加标签

Question

我在下面有以下代码。我需要添加 <li> <ul> 内的标签的 carousel-controls对于每个图像，由于图像的数量可能会有所不同，我需要用 js 来完成，但不确定在得到 image-controller 的长度后该怎么做

var img_number = $(".image-container img").length;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='image-container'>
  <img src="/img.png" alt="xga-1">
  <img src="/img2.png" alt="xga-1">
  <img src="/img3.png" alt="xga-1">
</div>

<div class="carousel-controls">
   <p class="angle-left" data-icon='ei-chevron-left' data-size='m'></p>
   <ul>
      <!-- Insert a <li>  for each image -->
    </ul>
   <p class="angle-right" data-icon='ei-chevron-right' data-size='m'></p>
 </div>

Answer 1

你真的不需要对你找到的图像的长度做任何事情，你可以循环它们并将它们附加到 UL 元素，用新的 li 包裹 元素:

$(function() {
  $(".image-container img").each((i, el) => {
    $('ul').append($("<li>").append(el));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='image-container'>
  <img src="/img.png" alt="xga-1">
  <img src="/img2.png" alt="xga-1">
  <img src="/img3.png" alt="xga-1">
</div>

<div class="carousel-controls">
   <p class="angle-left" data-icon='ei-chevron-left' data-size='m'></p>
   <ul>
      <!-- Insert a <li>  for each image -->
    </ul>
   <p class="angle-right" data-icon='ei-chevron-right' data-size='m'></p>
 </div>