How to loop in jQuery

Question

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

}

Not like this. Besides the approach, his mistake is using a class selector inside. — Skatch
– Skatch, Commented Jun 25, 2015 at 13:55
ID and class names are correct as I don’t want to animate the element I hover but another one with the corresponding class name (it’s coincidence that they both have the same name, although maybe a bit misleading in my example …) — user1706680
– user1706680, Commented Jun 25, 2015 at 13:59

Manish Jangir · Accepted Answer · 2015-06-25 14:01:30Z

5

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

edited Jun 25, 2015 at 14:01

answered Jun 25, 2015 at 13:54

Manish Jangir

5,4576 gold badges49 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Skatch Over a year ago

Fix the selector to "#"+this.id and I will give you that upvote. :D

Manish Jangir Over a year ago

But I've done according to his question otherwise I could do it $(this).animate....

Skatch Over a year ago

I know, but his question is flawed :)

Skatch Over a year ago

Oh, if it should trigger another element, than I get it, he is right.

Skatch · Accepted Answer · 2015-06-25 13:51:37Z

3

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

answered Jun 25, 2015 at 13:51

Skatch

2,3222 gold badges18 silver badges32 bronze badges

2 Comments

Pranay Rana Over a year ago

I am not saying its wrong but what if there is no need of class easy solution is to use multiple selector ...

Skatch Over a year ago

Sure, but it's always a good practice to group your stuff with similar properties.

Pranay Rana · Accepted Answer · 2015-06-25 14:03:40Z

3

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

edited Jun 25, 2015 at 14:03

answered Jun 25, 2015 at 13:52

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Comments

Nico · Accepted Answer · 2015-06-25 14:02:32Z

1

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.

answered Jun 25, 2015 at 14:02

Nico

7,0435 gold badges27 silver badges35 bronze badges

Comments

ekans · Accepted Answer · 2015-06-25 13:52:58Z

1

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

answered Jun 25, 2015 at 13:52

ekans

1,72414 silver badges25 bronze badges

Comments

Anto S · Accepted Answer · 2015-06-25 13:54:56Z

1

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

answered Jun 25, 2015 at 13:54

Anto S

2,4576 gold badges36 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to loop in jQuery

6 Answers 6

4 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related