如何根據div元素的no元素在div元素內創建新的bullent圖標？

Question

我想根據div的數量動態地創建子彈圖標。

例如，如果我有2個div滑塊，所以我想在其他div中創建2個子彈圖標，如果div計數爲0子彈應該顯示無。

我想是這樣的

<div class="mainslider"> 
    <div class="slider"><img src="abc.jpg"></div> 
    <div class="slider"><img src="xyz.jpg"></div> 
</div> 

<div class="bullet"> 
    <a href="#1">&bull;</a> 
    <a href="#2">&bull;</a> 
</div> 

基本上我想按不滑的div創建動態子彈圖標。 在此先感謝

Answer 1

你可以指望有多少div與「滑蓋」 class有，然後循環這一數字與子彈div與「子彈頭」類新a追加。

$(function() { 
 
    for (var i = 1; i <= $(".slider").size(); i++) { 
 
    $("<a></a>").attr("href", "#" + i).html("&bull;").appendTo(".bullet"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainslider"> 
 
    <div class="slider"> 
 
    <img src="abc.jpg"> 
 
    </div> 
 
    <div class="slider"> 
 
    <img src="xyz.jpg"> 
 
    </div> 
 
</div> 
 

 
<div class="bullet"> 
 
</div>