Targeting multiple elements with jQuery

Question

I have been searching but have come up blank and i'm wondering if I can use one jQuery statement to target multiple elements on a page. I have several identical buttons on a page and they are each made up of a left, middle and right background where the middle contains the text and can expand to any size necessary. Each has a unique Id and/or Class. I have it setup now so that when you mouse over their container div the 3 backgrounds change to give the appearance that the buttons are in a different state. The way its done now is with 1 hover call for each button which is located by Class (would rather use ID but you can't have multiple elements with the same ID). This hover is followed by 8 events. A background change for each right left and middle and a color change for the middles text.

This means lots of lines of code. What I want is to be able to call all the buttons at once with the hover event or to have the hover event somehow know which button is being hovered over and to throw that class or id or even name back to jQuery which can then change the buttons subclasses for right left and middle. The subclass for right left and Middle are identical on all the buttons so if the hover event could be focused on whatever event called it i'd only need one set of calls to change the background attributes... The current code is below for two of the buttons...

$j(".learnMoreButton").hover(
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css("color", "#666");
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );

$j(".bioButton").hover(
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.bioButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.bioButton .buttonMiddle a').css("color", "#666");
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );

Answer 1

You can do:

$(".learnMoreButton, .bioButton").hover(function() {
  $(this).find(".buttonRight")...
  ...
}, function() {
  ...
});

I will add that I think you'd be better off doing that with CSS classes.

.buttonLeft { background: url(/images/concaveBtn-Left.gif) }
.buttonMiddle { background-image: url(/images/concaveBtn-Middle.gif) }
.buttonMiddle a { color: #666; }
.buttonRight { url(/images/concaveBtn-Right.gif) }
.hoverover .buttonLeft { url(/images/concaveBtn-Left2.gif) }
.hoverover .buttonMiddle { url(/images/concaveBtn-Middle2.gif) }
.hoverover .buttonMiddle a { color: #FFF; }
.hoverover .buttonRight { background: url(/images/concaveBtn-Right2.gif) }

and

$(".learnMoreButton, .bioButton").hover(function() {
  $(this).addClass("hoverover");
}, function() {
  $(this).removeClass("hoverover");
});

and you'll have a lot less code.

Also you can give elements multiple classes so:

<div class="bioButton hoverbutton">
  ...
</div>
<div class="learnMoreButton hoverbutton">
  ...
</div>

and then it becomes even simpler:

$(".hoverbutton").hover(function() {
  $(this).addClass("hoverover");
}, function() {
  $(this).removeClass("hoverover");
});