jQuery "for" loop

Question

I am trying to write some very basic jQuery code here.

What I am doing here is I want the image to toggle when hover. I have 5 images, and I was able to archive that when I wrote 5 codes, 1 for each image.

        $('#menu > ul:first-child > li:nth-child(1)').hover(function(){
            $('li:nth-child(1) > .image-hover').toggle();
            $('li:nth-child(1) > .image').toggle();
        });

        $('#menu > ul:first-child > li:nth-child(2)').hover(function(){
            $('li:nth-child(2) > .image-hover').toggle();
            $('li:nth-child(2) > .image').toggle();
        });

        $('#menu > ul:first-child > li:nth-child(3)').hover(function(){
            $('li:nth-child(3) > .image-hover').toggle();
            $('li:nth-child(3) > .image').toggle();
        });

        $('#menu > ul:first-child > li:nth-child(4)').hover(function(){
            $('li:nth-child(4) > .image-hover').toggle();
            $('li:nth-child(4) > .image').toggle();
        });

        $('#menu > ul:first-child > li:nth-child(5)').hover(function(){
            $('li:nth-child(5) > .image-hover').toggle();
            $('li:nth-child(5) > .image').toggle();
        });

Now I want to shorten the code, using the "for" loop. The idea is I have a variable i, starting from 1, increasing 1 by 1 up to 5. The nth-child above, instead of having a specific number, will now hold i. As i changes, nth-child(i) will have respective values of i.

        (function($){
            for (var i = 1; i < 6; i++) {
                $('#menu > ul:first-child > li:nth-child(i)').hover(function(){
                    $('li:nth-child(i) > .image-hover').toggle();
                    $('li:nth-child(i) > .image').toggle();
                });
            };
        })(jQuery);

This shorten code doesn't work though.

Can someone help me with this? Thanks a lot.

you need to use i as a variable... still you have the problem described in developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — Arun P Johny
– Arun P Johny, Commented May 28, 2014 at 2:51

Arun P Johny · Accepted Answer · 2014-05-28 03:02:13Z

6

If you want to target the elements within the currently hovered element, then you can use .find()/.children() in context with this(in the event handler this refers to the element which was targeted by the handler - in this case the li element) like

//dom ready handler
jQuery(function ($) {
    $('#menu > ul:first-child > li').hover(function () {
        //I think you want to target the child elements of the current li so
        $(this).children('.image-hover').toggle();
        $(this).children('.image').toggle();
    });
});

Another option since you didn't share the target markup is to find the index of the current li using .index() and use it to target the li in the same index like

//dom ready handler
jQuery(function ($) {
    $('#menu > ul:first-child > li').hover(function () {
        //find the index of the current element
        var i = $(this).index();
        //use i as a variable to find i'th child of li
        $('li:nth-child(' + i + ') > .image-hover').toggle();
        $('li:nth-child(' + i + ') > .image').toggle();
    });
});

edited May 28, 2014 at 3:02

answered May 28, 2014 at 2:53

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

13 Comments

thu nguyen Over a year ago

Thank you. This worked for me. Would you mind explaining your code?

Arun P Johny Over a year ago

@user3678075 which one

Deepak Ingole Over a year ago

@ArunPJohny master updated your ans with little more comment..hope you dont mind doing me so..as always +1 for great ans

thu nguyen Over a year ago

@ArunPJohny The first one, why $(this).children('.image-hover').toggle() ?

Arun P Johny Over a year ago

@user3678075 as I said this refers the li which was hovered so $(this).children('.image-hover') will give the .image-hover element which is inside the current li

|

konghou · Accepted Answer · 2014-05-28 02:56:53Z

0

This seems can be completely replaced by changing the css hover - background style instead of using javascript to toggle hover image.

answered May 28, 2014 at 2:56

konghou

5577 silver badges20 bronze badges

Comments

Piyush Kumar Baliyan · Accepted Answer · 2014-05-28 03:47:30Z

0

Modify your selctor:

$('#menu > ul:first-child > li:nth-child(i)') to
$('#menu > ul:first-child > li:nth-child('+i+'))'

(function($){
            for (var i = 1; i < 6; i++) {
                $('#menu > ul:first-child > li:nth-child('+i+')').hover(function(){
                    $('li:nth-child('+i+') > .image-hover').toggle();
                    $('li:nth-child('+i+') > .image').toggle();
                });
            };
        })(jQuery);

The problem is that your code is taking your i AS i (alphabet) not i AS i(variable) because your i is in quotes remove quotesfrom around i.

edited May 28, 2014 at 3:47

answered May 28, 2014 at 3:12

Piyush Kumar Baliyan

4041 gold badge6 silver badges21 bronze badges

2 Comments

thu nguyen Over a year ago

I changed all (i) to ('+i+') but still that doesn't work though.

Piyush Kumar Baliyan Over a year ago

Can you please view your full code, or show me a fiddle of your code.

Collectives™ on Stack Overflow

jQuery "for" loop

3 Answers 3

13 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related