how to create new bullent icon inside a div element according to no of div element?

Question

I want to create bullet icon dynamically according to no of div.

for example if i have 2 div slider, so i want to create 2 bullet icon inside other div if div count is 0 bullet should be display none.

I want something like this

<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>

basically i want to create bullet icon dynamically according to no of slider div. Thanks in advance

Answer 1

You could count how many div with "slider" class there are, then cycle this number to append new a with bullets to div with "bullet" class.

 $(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>