Question

I am writing some code where I count the number of Div children and then based on the loop iteration I want to have a new div class name, for example “.ClassName” + i. I am trying to do this with Jquery but it’s not working for some reason.

<div class="Parent">

    <div class="Percentage">
    <pe:Percentage runat="server" />
    </div>

    <div class="Percentage">
    <pe:Percentage runat="server" />
    </div>

    <div class="Percentage">
    <pe:Percentage runat="server" />
    </div>

</div>

$(document).ready(function() {

    $(".Percentage").each(function(i, val) {
        alert(val.innerHTML);
        $("#Parent .Percentage").removeClass(".Percentage").addClass(".Percentage" + i); 
        alert(val.innerHTML);

    });

    //        var count = $('.Percentage').length;
    //        alert(count);
    //        percentageCount();


});    

What would be a good way of doing this?

Nick

Answer 1

Try this, Live Demo

$(".Percentage").each(function(i, val) {

    $(this).removeClass("Percentage").addClass("Percentage" + i);

});

You should not give dot while adding or removing class

removeClass(“.Percentage”) should be removeClass(“Percentage”)

addClass(“.Percentage” + i); should be addClass(“Percentage” + i)