want to create a loop in jquery based on a value

 var cnt = document.getElementById('counter');
 //row1 is incremental and based on some value from 
 // database this value will increase. want to 开发者_如何学Gocreate 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

Assuming your markup looks something like this:

<div class="row1">...</div>
<div class="row2">...</div>
...

You should add another class to the div (or whatever element you use):

<div class="row1 entry_row">...</div>
<div class="row2 entry_row">...</div>
...

And then you could iterate through:

$('.entry_row').each(function() {
    var row = this;
    ...
});

Or add hover like in your example:

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

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";
});

Is this what you're looking for

var cnt = parseInt($('#counter').val(),10);
for(var i=0;i<counter;i++){
    $(".row" + i).mouseenter(function(){
        $(this).addClass("answer_hover_row").show()
    }).mouseleave(function(){
        $(this).removeClass("answer_hover_row").hide()
    });
}

Your question is a bit confusing. Do you use id="" and class="" to adresse the same tag? Do you really want to hide the container on mouseOut? Anyway, as far as I can make out, you do want to toggle a Hover-Event on something. The pure jQuery solution to this would look something like this:

$( 'DIV' ).hover(
    function () {  // MouseOver-Event
        $(this).addClass( 'answer_hover_row' );
        $( '#row1' ).show();
    },
    function () {  // MouseOut-Event
        $(this).removeClass( 'answer_hover_row' );
        $( '#row1' ).hide();
    }
);

I would assume you could use a very short code utilizing a combination of .toggle(), .toggleClass(), and the initial .hover() method. Untested suggestion:

$( 'DIV' ).hover( function() { $(this).toggleClass( 'className' ).toggle(); } );

You can iterate through rows by selecting all of them at once, but you need to add once extra class to all of them, assume you add a css-class "hover-rows", do so:

   $('.hover-rows').each(function () {
      $(this).mouseenter(function(){
        $(this).addClass("answer_hover_row").css('visibility', ''visible');
      })
      .mouseleave(function(){
        $(this).removeClass("answer_hover_row").css('visibility', 'hidden');
      });
   });