Foreach element and add custom data jquery?

Question

I have this HTML markup

 <div class="wizard-step">
 <div class="wizard-step">
 <div class="wizard-step">
 <div class="wizard-step">

I must change html with jquery that after loop i get this markup

<div id="wizard-step-1" class="wizard-step tab-pane fade in active" data-step="1">
<div id="wizard-step-2" class="wizard-step tab-pane fade" data-step="2">
<div id="wizard-step-3" class="wizard-step tab-pane fade" data-step="3">
<div id="wizard-step-4" class="wizard-step tab-pane fade" data-step="4">

Working fiddle http://jsfiddle.net/brainbolt/52VtD/4/

Answer 1

Succinctly, with jQuery:

$('.wizard-step').each(function(k,v) {
    var classToAdd = 'tab-pane fade';
    if (k === 0) {
        classToAdd += ' in active';
    }
    $(v).prop('id', 'wizard-step-' + (k+1)).addClass(classToAdd).attr('data-step', (k+1));    
});

Fiddle

Answer 2

Have a good study at the jQuery function called .each() which can be read about here.

http://api.jquery.com/each/

What you will find is that the call-back function is passed two parameters. The first is the loop index and the second is the element. For example

$(".wizard-step").each(function(index, element) {
   if(index==0) {
      // Do something for first
   } else {
      // Do something for others
   }
});

Answer 3

I recommend wrapping them in a distinct container (I'm sure they are already wrapped in something, but for demonstration purposes, I'd like to ensure it). Once that is done, as below:

HTML code

<div class="wizard-container">
    <div class="wizard-step"></div>
    <div class="wizard-step"></div>
    <div class="wizard-step"></div>
    <div class="wizard-step"></div>
</div>

... all you have to do is get the .wizard-container .wizard-step elements with a simple jQuery select:

Javascript code

var wsteps = $('.wizard-container .wizard-step');

Once we have those elements, we just have to iterate over them. For this use either a for cycle:

Javascript code

for (var i = 1; i <= wsteps.length; i++)
{
    wsteps[i].attr('data-step', i);
    // HTML5 browsers will support:
    // wsteps[i].data('step', i);

    wsteps[i].addClass('wizard-step');
    wsteps[i].addClass('tab-pane');
    wsteps[i].addClass('fade');

    if (i == 1)
    {
        wsteps[i].addClass('in');
        wsteps[i].addClass('active');
    }
}

or using jQuery's built-in .each(), that is designed especially for iterating over a set of elements returned by a jQuery select:

Javascript code

var n = 1;
wsteps.each(function () {
wsteps[i].attr('data-step', n);
    // HTML5 browsers will support:
    // wsteps[n].data('step', n);

    wsteps[n].addClass('wizard-step');
    wsteps[n].addClass('tab-pane');
    wsteps[n].addClass('fade');

    if (n == 1)
    {
        wsteps[n].addClass('in');
        wsteps[n].addClass('active');
    }
    n++;
});

Both approaches have their minor cons/pros, but at this scale, it is purely a design choice.