CODEWITHSUNDEEP
javascriptjquerycsshtml
Abhay Singh
Abhay Singh

Reputation: 1689

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

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

Upvotes: 0

Views: 59

Answers (1)

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

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>

Upvotes: 1

Related Questions