javascript - Add class to div with number increasing for each div - Stack Overflow

admin管理员组

文章数量:1305354

I'm wanting to add a class 'slide-number-x' to an element within each slide in a slider, with the 'x' representing the slide number in the dom.

So, for example this simple HTML markup:

<div class="slider">
    <div class="slide"><div class="slide-title"></div></div>
    <div class="slide"><div class="slide-title"></div></div>
    <div class="slide"><div class="slide-title"></div></div>
    <div class="slide"><div class="slide-title"></div></div>
</div>

Would bee:

<div class="slider">
    <div class="slide slide-number-1"><div class="slide-title"></div></div>
    <div class="slide slide-number-2"><div class="slide-title"></div></div>
    <div class="slide slide-number-3"><div class="slide-title"></div></div>
    <div class="slide slide-number-4"><div class="slide-title"></div></div>
</div>

I thought this would work:

$('.slide').each(function(i){
  $(this).addClass('slide-number'i+1);
});

Any help or ideas?

Many thanks, R

I'm wanting to add a class 'slide-number-x' to an element within each slide in a slider, with the 'x' representing the slide number in the dom.

So, for example this simple HTML markup:

<div class="slider">
    <div class="slide"><div class="slide-title"></div></div>
    <div class="slide"><div class="slide-title"></div></div>
    <div class="slide"><div class="slide-title"></div></div>
    <div class="slide"><div class="slide-title"></div></div>
</div>

Would bee:

<div class="slider">
    <div class="slide slide-number-1"><div class="slide-title"></div></div>
    <div class="slide slide-number-2"><div class="slide-title"></div></div>
    <div class="slide slide-number-3"><div class="slide-title"></div></div>
    <div class="slide slide-number-4"><div class="slide-title"></div></div>
</div>

I thought this would work:

$('.slide').each(function(i){
  $(this).addClass('slide-number'i+1);
});

Any help or ideas?

Many thanks, R

• javascript
• jquery
• iteration

Share Improve this question Follow asked Jan 23, 2013 at 20:19 John the PainterJohn the Painter 2,61588 gold badges6464 silver badges105105 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

You forgot the concatenation operator (+), use:

$('.slide').each(function(i){
  $(this).addClass('slide-number-' + (i+1));
});

It looks like it should be:

$(this).addClass('slide-number-' + (i + 1));

This gives you what you want

$('.slide').each(function(i){
  $(this).addClass('slide-number-' + (i+1));
});

You're + is in the wrong place... Try this. It worked for me...

$('.slide').each(function(i){
  $(this).addClass('slide-number'+i);
});

You are missing the concatenation operator. Also, the convention for incrementing a value in JavaScript is the the double plus.

$('.slide').each(function(i){
  $(this).addClass('slide-number-' + ++i);
});

本文标签： javascriptAdd class to div with number increasing for each divStack Overflow