Question

I have a function here that loops through two wrappers and then loops through it’s respective children and throws it a number to list out items in numerical order. Instead of using a for loop, I’ve decided to use the each jQuery function. Here is my question:

Which way is better to achieve this and what are the advantages/disadvantages by going one way or the other?? Is it better to use a for loop??

This:

$(".articleContentWrapper").each( function () { 
    var i = 1;
    $(this).find(".howToStepNumber").each(function () {
        var b = i++;
        $(this).html(b);
    });
});

Or this:

$(".articleContentWrapper").each( function () { 
    var i = 1;
    $(this).find(".howToStepNumber").each(function () {
        $(this).html(i++);
    });
});

Answer 1

How about this?

$(".articleContentWrapper").each( function () { 
    $(this).find(".howToStepNumber").each(function (i, e) {
        $(this).html(i + 1);
    });
});

The .each() method already provides an index holder so you don’t need to create one yourself.