Ensuring each div element has a unique bullet icon: A step-by-step guide

I am looking to dynamically create bullet icons based on the number of div elements present in a slider.

For instance, if there are 2 slider divs, I want to generate 2 bullet icons within another div. If there are no div elements, then the bullets should not be displayed.

My desired output would resemble the following structure:

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

In essence, my goal is to dynamically generate bullet icons based on the number of slider divs present. Thank you in advance!

javascriptjquerycsshtml

Answer №1

To create a bullet navigation for slides, you can count the number of div elements with the "slider" class. Then dynamically generate bullet links and append them to div with the "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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to implement a permanent change using PHP Ajax

I am facing an issue with the "Add as Buddy" button on my webpage. I want it to change permanently to "Pending Request" once clicked, but it keeps reverting back to "Add as Buddy" whenever I refresh the page. Can anyone suggest a solution for this problem? ...

phpjavascriptajax

Position the text alongside the Facebook emblem

I am having trouble getting the text Follow Us to align on the far right next to the Facebook Icon. I added the float:right property, but it is not working as expected. Here is the code snippet: <a href="#" target="_blank" style="font-family: Arial, ...

htmlcss

Exploring VueJS watchers: How to get started?

Struggling to grasp the concept of Watchers in VueJS, particularly when trying to implement them for tracking tab changes and resetting values. Even though I have set up a watch with parameters like `oldValue` and `newValue`, their usage remains unclear to ...

javascriptvue.jsvuetify.jswatch

What is the easiest way to connect to MongoDB and add a new post with just a few lines of code?

Currently, I'm working with express.js and node.js. Can you share a brief snippet of code for connecting to mongo and inserting a post into the database? ...

javascriptnode.jsmongodbexpressdatabase

What are some creative ways to design nested flexboxes?

I'm currently working on creating a navigation bar using two nested flex boxes within one parent container. However, I'm facing difficulty in styling the inner flexbox without impacting the main container items. Here is how my layout is supposed ...

htmlcssflexbox

Accessing a precise div element in a webpage

Currently, I am utilizing Vue.js and Nuxt for my web development. One issue I am facing is related to anchors. Specifically, when I navigate to mysite.com/page1#section1, I want the page to scroll to section1. In my code, I have the following snippet: < ...

javascripthtmlvue.js

Tips for inserting an image within a horizontal list of items

Struggling to find a solution here. I have a menu with a unique bar design between list elements, featuring breaks at the top and bottom. I attempted to use li:after in the CSS to insert an image, but encountered issues with padding and margin. Below is t ...

htmlcsstwitter-bootstrap-3

Encountering a 500 error when making API requests after deploying Next.js on Vercel, although they work fine

I recently deployed my Next.js app to Vercel, and I'm experiencing issues with my API calls returning a 500 status code, even though they work perfectly fine on localhost. The initial load using getStaticProps seems to be working, so I suspect the con ...

javascriptreactjsnext.jsvercel

Tips on how to showcase a picture with the focus on the center by enlarging it within

We have a long frame on the page, with an aspect ratio of about 3.5:1 width to height. However, most of the photos being displayed are in a 4:3 ratio, which is larger and not a proper fit for the frame. The customer really wants the long frame and has no ...

htmlcss

Learn how to send information to a form and receive a response when a key is pressed, either up or down, by

Can you help with fetching data and passing it into a form to respond to customer names on keyup or keydown using JSON and PHP? <?php $conn = new mysqli("localhost", 'root', "", "laravel"); $query = mysqli_query($conn,"select * from customers ...

javascriptphpjsonajax

Click twice on the editable AngularJS table to wrap each item

As a new learner of Angularjs, I found an existing code example and decided to customize it. My goal was to enable double-click editing for each li item. However, after adding one more li, the functionality did not work as expected. <li ng-dblclick="st ...

javascriptangularjs

Guide to creating a vertical handler that can be resized

Did you know that you can resize tables in http://www.jsfiddle.net? I'm curious about how to resize just the "Vertical Handler". Could someone share the source code with me? If possible, please provide an example on http://www.jsfiddle.net. ...

javascripthtmlcss

Place objects at the bottom of the container

Is there a way to align each "Read more" button at the bottom of its respective div without setting a specific height for the divs or changing any markup or style elements? While pseudo class selectors could be used, is there a simpler approach that would ...

htmlcss

Troubleshooting checkbox problem with AJAX request in PHP

Experiencing an issue with a simple AJAX call that checks if a checkbox is checked. Currently, regardless of whether the checkbox is checked or not, it always prints "not checked". I've attempted changing the "POST"/"GET" methods in the PHP code, howe ...

javascriptphpajax

"Combining the power of jQuery's empty() method with a parallel

I created a dynamic page using jQuery that fetches new content from the server through AJAX calls. However, I have noticed that there are two main performance bottlenecks - the AJAX call itself and the time-consuming process of removing and unbinding previ ...

jqueryajaxdelegatesparallel-processing

Constantly showing blank white pages on my website specifically in Internet Explorer 11

I successfully developed a website using react, babel, webpack, and backend Django framework. Everything runs smoothly on Chrome, Safari, and Firefox, but when it comes to IE11, issues arise. Initially, the site functions properly, but after navigating thr ...

javascriptreactjswebpackinternet-explorer-11polyfills

EdgesGeometry: raycasting precision issues

I'm currently working with EdgesGeometry on PlaneGeometry and it appears to be creating a larger hitbox in mouse events. Interestingly, this issue doesn't arise when using CircleGeometry. Below is the code snippet I am using: createPanel = f ...

javascriptthree.js

Obtain the IDs of the previous and next list items if they exist?

Hey there friends, I've hit a roadblock and could really use your help. I'm trying to figure out how to get the previous and next list items in a specific scenario. Let's say I have a ul with three li elements, and the second one is currentl ...

javascriptjquery

ReactJS is throwing an error stating that the component is undefined

Experimenting with ReactJS, I've set up a hierarchy of three nested components: UserProfile.jsx import React from 'react'; const UserProfile = React.createClass({ getInitialState: function() { return { username: "zuck" }; ...

javascriptreactjs

Variable scope not properly maintained when there is a change in the Firebase promise

I am currently working on developing a controller function to handle signup submissions using Firebase. However, I've encountered an issue where the variables within the scope (controllerAs: $reg) do not seem to update correctly when modified inside a ...

javascriptangularjsfirebasefirebase-authentication