Looping through JQUERY using the loop number as the key [duplicate]

Question

I want to loop through JQUERY based on a count that I would input. Specifically if I enter this for entry 0, this code works:

$(document).ready(function()
{
    $('.0').mouseenter(function()
    {
        $('.hideme0').fadeIn('slow');
    });
    $('.0').mouseleave(function()
    {
        $('.hideme0').fadeOut('slow');
    });
});

I now wish to replace ('.0') Which is dynamic CSS class with the name 0 with a loop counter for example

for (var n = 0; n < 3; ++ n)
{
    $(**n**).mouseenter(function()
    {
        $('.hideme**n**').fadeIn('slow');
    });
    $(**n**).mouseleave(function()
    {
        $('.hideme**n**').fadeOut('slow');
    });
}

Any ideas on how to do this with jQuery? I can't find info in the API or with a Google search for instructions.

I hope this is clear, and you understand what I'm trying to do.

musefan · Accepted Answer · 2014-01-24 15:49:02Z

2

What don't you get? It's just a simple string so you can build it with concatenation:

$('.' + n).mouseenter(function()
{
    $('.hideme' + n).fadeIn('slow');
//...
//and so on

However, using this in a for loop will like cause an issue due to closures. Which you can solve like so:

for (var n = 0; n < 3; ++ n)
{
    (function(x){
        $('.' + x).mouseenter(function()
        {
            $('.hideme' + x).fadeIn('slow');
        });
    })(n);

    (function(x){
        $('.' + x).mouseleave(function()
        {
            $('.hideme' + x).fadeOut('slow');
        });
    })(n);
}

Here is a working example using your HTML (from comments)

edited Jan 24, 2014 at 15:49

answered Jan 24, 2014 at 13:52

musefan

48.5k21 gold badges144 silver badges193 bronze badges

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

13 Comments

Stephen Kennedy Over a year ago

Thanks for the response, I really appreciate it but this solution didn't work for me unfortunately. Thanks anyway

musefan Over a year ago

@StephenKennedy: What part doesn't work? Do you get any console errors? Have you tried debugging it?

Stephen Kennedy Over a year ago

Hi, I'm debugging it now musefan, its a pain! Can you include the code including the $(document).ready() element? I'm wondering now if I'm just doing something crazy. First I thought my PHP might be causing the error but its working fine if I don't loop it, if I just set them up one by one.

musefan Over a year ago

@StephenKennedy: Create a JSFiddle with the HTML and I will make the javascript work with it, then you can see it in action

Stephen Kennedy Over a year ago

Musefan, you are the man! I don't know why it didn't work initially for me, maybe I didn't have the $(document).ready in the right place or something..anyway kudos. Thanks, you've made my day. You probably don't need coding tips from me, but if you ever need help, give me a shout

|

Mark S · Accepted Answer · 2014-01-24 15:07:45Z

2

for (var n = 0; n < 3; n++)
{
    $("." + n).mouseenter(function()
    {
        $('.hideme' + n).fadeIn('slow');
    });

    $("." + n).mouseleave(function()
    {
        $('.hideme'+ n).fadeOut('slow');
    });
}

edited Jan 24, 2014 at 15:07

answered Jan 24, 2014 at 13:52

Mark S

8696 silver badges11 bronze badges

7 Comments

user632287 Over a year ago

should be $("." + n)

Mark S Over a year ago

you caught it while I was editing. thanks.

Stephen Kennedy Over a year ago

Hi All, thanks very much for getting back. Still not working:for (var n = 0; n < 20; n++) { $('.' + n).mouseenter(function() { $('.hideme' + n).fadeIn('slow'); }); $('.' + n).mouseleave(function() { $('.hideme'+ n).fadeOut('slow'); }); } This is the code I'm currently using. I checked in my comments on my js page and I had actually already tried this.

Mark S Over a year ago

does the console produce an error?

Stephen Kennedy Over a year ago

No error, the fadin and fadeout just don't seem to happen, I'm debugging now...thanks again for trying to help

|

Dan-Nolan · Accepted Answer · 2014-01-24 13:52:16Z

1

You can just concatenate the string and use that as your selector:

var index = 1;
var selector = '.hideme' + index;
$(selector).fadeOut('slow');

answered Jan 24, 2014 at 13:52

Dan-Nolan

6,6574 gold badges29 silver badges32 bronze badges

Comments

David · Accepted Answer · 2014-01-24 13:53:13Z

0

It should just be a matter of concatenating the number value as part of the selector string:

$('.' + n).mouseenter(function()
{
    $('.hideme' + n).fadeIn('slow');
});
$('.' + n).mouseleave(function()
{
    $('.hideme' + n).fadeOut('slow');
});

Numerics can be interpreted as strings implicitly in JavaScript in this manner.

answered Jan 24, 2014 at 13:53

David

221k42 gold badges245 silver badges337 bronze badges

Collectives™ on Stack Overflow

Looping through JQUERY using the loop number as the key [duplicate]

4 Answers 4

13 Comments

7 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

13 Comments

7 Comments

Comments

Comments

Linked

Related