CODEWITHSUNDEEP
jqueryloops
user1706680
user1706680

Reputation: 1111

How to loop in jQuery

I have a couple of jQuery function with a similar syntax.

$("#item-1").hover(function(){
    $(".item-1").animate({opacity:1},"slow");
},function(){
    $(".item-1").animate({opacity:0},"slow");
});

$("#item-2").hover(function(){
    $(".item-2").animate({opacity:1},"slow");
},function(){
    $(".item-2").animate({opacity:0},"slow");
});

$("#item-3").hover(function(){
    $(".item-3").animate({opacity:1},"slow");
},function(){
    $(".item-3").animate({opacity:0},"slow");
});

My question is how to shorten my code with the help of a loop. I tried the following but that didn’t work:

for (i = 1; i <= 3; ++i) {

  $("#item-" + i).hover(function(){
    $(".item-" + i).animate({opacity:1},"slow");
  },function(){
    $(".item-" + i).animate({opacity:0},"slow");
  });

}

Upvotes: 0

Views: 74

Answers (6)

Pranay Rana
Pranay Rana

Reputation: 176886

try out might work for you

$("#item-1, #item-2, #item-3").hover(function(){
    $(this).animate({opacity:1},"slow");
},function(){
    $(this).animate({opacity:0},"slow");
});

Upvotes: 3

Nico
Nico

Reputation: 6893

This should work :

for (i = 1; i <= 3; ++i) {
  (function(index){
    $("#item-" + index).hover(function(){
      $(".item-" + index).animate({opacity:1},"slow");
    },function(){
      $(".item-" + index).animate({opacity:0},"slow");
    });
  })(i);
}

The problem with your loop is that the variable i is not captured by the hover function. With this, the i variable will be captured properly.

Upvotes: 1

Manish Jangir
Manish Jangir

Reputation: 5437

You could you jQuery's attributeStartsWith selector

Description: Selects elements that have the specified attribute with a value beginning exactly with a given string.

The following will work if you have .item-x classes elements:

$('[id^="item-"]').hover(function(){
    $("."+this.id).animate({opacity:1},"slow");
},function(){
    $("."+this.id).animate({opacity:0},"slow");
});

Otherwise in my suggestion you could do it by :

$('[id^="item-"]').hover(function(){
    $(this).animate({opacity:1},"slow");
},function(){
    $(this).animate({opacity:0},"slow");
});

Upvotes: 5

Anto S
Anto S

Reputation: 2449

If your html is similar to below,

<div class="item-class" id="item-1">
    <div class="item-sub-class"></div>
</div>
<div class="item-class" id="item-2">
    <div class="item-sub-class"></div>
</div>
<div class="item-class" id="item-3">
    <div class="item-sub-class"></div>
</div>

Instead of id use class

$(".item-class").hover(function(){
    $(this).find('.item-sub-class').animate({opacity:1},"slow");
},function(){
    $(this).find('.item-sub-class').animate({opacity:0},"slow");
});

Upvotes: 1

ekans
ekans

Reputation: 1714

add a class to your item, to select them, and do this

$(".item").hover(function(){
    $(this).animate({opacity:1},"slow");
  },function(){
    $(this).animate({opacity:0},"slow");
  });

Upvotes: 1

Skatch
Skatch

Reputation: 2272

Put a universal class item to all elements and then just call the function for all items:

$(".item").hover(function(){
    $(this).animate({opacity:1},"slow");
},function(){
    $(this).animate({opacity:0},"slow");
});

Upvotes: 3

Related Questions