Question

 var cnt = document.getElementById('counter');
 //row1 is incremental and based on some value from 
 // database this value will increase. want to create a loop Here

$(".row1").mouseenter(function(){
    $(this).addClass("answer_hover_row");
    document.getElementById('row1').style.visibility = "visible";
}).mouseleave(function(){
    $(this).removeClass("answer_hover_row");
    document.getElementById('row1').style.visibility = "hidden";
});

$(".row2").mouseenter(function(){
    $(this).addClass("answer_hover_row");
    document.getElementById('row2').style.visibility = "visible";
}).mouseleave(function(){
    $(this).removeClass("answer_hover_row");
    document.getElementById('row2').style.visibility = "hidden";
});

I am trying to create a loop for the mouseenter function so that i can create it for as many divs that are printed dynamicaly. The count of the divs is in a hidden text box with id as counter. Please help me with the loop. .each function wont work out for me

Answer 1

If there are cnt number of rows, each with class=”row1″, class=”row2″, etc…, then you could use this jQuery (I switched to the .hover() function which is more compact) and I assumed that the count of rows comes from the innerHTML of your counter object:

var cnt = parseInt(document.getElementById('counter').innerHTML, 10);
for (var i = 1; i <= cnt; i++) {
    $(".row" + i).hover(function(){
        $(this).addClass("answer_hover_row");
        this.style.visibility = "visible";
    }, function(){
        $(this).removeClass("answer_hover_row");
        this.style.visibility = "hidden";
    });
}

It would be even easier if you just put the same class="rowN" on every row and just used code like this:

$(".rowN").hover(function(){
    $(this).addClass("answer_hover_row");
    this.style.visibility = "visible";
}, function(){
    $(this).removeClass("answer_hover_row");
    this.style.visibility = "hidden";
});