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.

Answer 1

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.

Answer 2

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

Answer 3

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