0

I have 2 group of IDs, one it's called "Andrea" and the second one "Robert". Every group runs from 1 to 40 so i have for example:

Andrea1,#Andrea2,#Andrea3,#Andrea4 etc..

and the same for Robert:

Robert1,#Robert2,#Robert3,#Robert4 etc...

I need to link each other every ID like this for example:

$(document).ready(function(){
    $("#Andrea1").hover(function(){
        $("#Andrea1").fadeOut('slow');
        $("#Robert1").fadeOut('slow');
    }, function(){
        $("#Andrea1").fadeIn('slow');
        $("#Robert1").fadeIn('slow');
    });
});

but as you know it's not intelligent do 40 of that. So my question is this: is there a way to do it in a smarter way? Something like this: (i know it's not correct but it's a way to explain it)

$(document).ready(function(){
    $("#Andrea[i]").hover(function(){
        $("#Andrea[i]").fadeOut('slow');
        $("#Robert[i]").fadeOut('slow');
    }, function(){
        $("#Andrea[i]").fadeIn('slow');
        $("#Robert[i]").fadeIn('slow');
    });
});
Improve this question
2
  • Use classes for this. Commented Dec 4, 2013 at 8:37
  • What does your html look like? Commented Dec 4, 2013 at 8:42

2 Answers 2

Reset to default
2

The easiest thing to do is add some shared class to all of the items, and use that as your jQuery selector. However, in case you do not have control over the HTML, you can loop using an iterator, and use that iterator to connect those elements:

$(document).ready(function(){
    for(var i=1;i < 41; i++){ 
        $("#Andrea" + i).hover(function(){
            $("#Andrea" + i).fadeOut('slow');
            $("#Robert" + i).fadeOut('slow');
        }, function(){
            $("#Andrea" + i).fadeIn('slow');
            $("#Robert" + i).fadeIn('slow');
        });
    }
});

Or, if the total of the items is variable, you can add some logic:

$(document).ready(function(){
    // use a regex as a filter to find total amount of divs 
    // with an id that starts with  the string "Andrea"
    var max = $("div").filter(function() {
        return this.id.match(/Andrea/);
    }).length;

    for(i=1;i < max; i++){ 
        $("#Andrea" + i).hover(function(){
            $("#Andrea" + i).fadeOut('slow');
            $("#Robert" + i).fadeOut('slow');
        }, function(){
            $("#Andrea" + i).fadeIn('slow');
            $("#Robert" + i).fadeIn('slow');
        });
    }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I have the complete control of my html code, so i tried the fist method you posted but it doesn't work!
@dborghez did you try the looping method?
Romijin , i tried first the method of Hiral and it works ;) but thanks to you too
1

Add common class to all Andrea and Robert ids say group.

Try:

$(document).ready(function(){
    $(".group").hover(function(){
        var id = $(this).attr("id").split("Andrea").pop();
        $(this).fadeOut('slow');
        $("#Robert"+id).fadeOut('slow');
    }, function(){
        var id = $(this).attr("id").split("Andrea").pop();
        $(this).fadeIn('slow');
        $("#Robert"+id).fadeIn('slow');
    });
});

DEMO here.

Improve this answer

3 Comments

@dborghez IDs in HTML are <div id='foo'> and not <div id='#foo'>.
@dborghez updated my answer. ID cannot start with #. It should be Andrea1 not #Andrea1. Working DEMO here.
OMG, was a terrible mistake :) I know it but I did copy/paste from another document and I forgot to delete the #. Btw, thanks guys! You solved a big problem :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.