Multiply an element by a number and insert using jQuery

Question

I'm wondering if you can multiply an element using jQuery a number of times and insert it using .html()?

I am building my own slider which might help put things in context...

I am getting a number of times an element is used, which is stored in a var called eachSlideCount . So for example, this might output 10.

Then what I want to do is create a <span></span> for each of these (so 10 spans) and insert this into a div to generate a pager.

$this.next('.project-slider-count').html('<span></span>')

Is there anyway to muliply this span by the eachSlideCount number and then add to the .project-slider-count element?

I got this far... but clearly missing something...

var eachSlideCount = $this.find('.other-slides').length;
var eachSlideTotal = ($this.next('.project-slider-count').html('<span></span>')) * eachSlideCount;
$('.project-slider-count').html(eachSlideTotal);

Thanks in advance

Answer 1

Multiplication can only be done on numbers. If you want to repeat something, write a loop:

var span = '';
for (var i = 0; i < eachSlideCount; i++) {
    span += '<span></span>';
}
$this.next('.projectslider-count').html(span);

Answer 2

In JavaScript, you can execute a for loop. For example, in the following:

var count = 10;
for (var i=0; i<count; i++) {
   // Code
}

The body of the loop would be executed 10 times.

In jQuery, you can append a new HTML element inside an existing element using the append() method. For example, the following will add <span> elements in a loop:

var container = $("#container");
var count = 10;
for (var i=0; i<count; i++) {
   container.append("<span>");
}

This is illustrated in a jsFiddle .