如何添加標籤取決於另一個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>") 
} 
);