如何添加标签取决于另一个div的长度

Question

我在下面有下面的代码。我需要添加carousel-controls每个图像的<ul>内<li>标签，因为图像的数量可以改变，我需要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>

Answer 2

这样你可以将它们添加

$(".image-container img").each(function(){ 
$("ul").append("<li>"+$(this).html()+"</li>") 
} 
);