only affect one element [jquery]

I have a set of code like this:

$('.rightMainP').hover(function() {
    $('#rightMain img:first-child').attr('src', '../Images/whiteSidewaysNub.png')
}, function() {
    $('#rightMain img:first-child').attr('src', '../Images/graySidewaysNub.png')
});

I also have multiple #rightMain divs. When I hover over one, I want it's respective image to change.

My problem is that when I hover over the rightMain div, every sing开发者_如何学Pythonle image of every rightMain div changes, instead of only the image from the first rightMain div.

How can I make it so hovering over one element out of multiple elements changes only the image of that respective element and not all of them?

    <div id="answers">
        <div id="leftInfo">
        <img src="../Images/junglrLarge.png"/><a href="">TESTUSER</a><br /><span>Level 6</span>
        </div>
        <div id="rightMain">
                <img class="graySidewaysNub" src="../Images/graySidewaysNub.png"></img>
                <p class="rightMainP">This is my answer!</p>
                <div class="rate"><img src="../Images/incLike.png"/>0 &nbsp;&nbsp;<img src="../Images/alert.png"/></div>
        </div>

        <div id="leftInfo">
        <img src="../Images/junglrLarge.png"/><a href="">TESTUSER</a><br /><span>Level 6</span>
        </div>
        <div id="rightMain">
                <img class="graySidewaysNub" src="../Images/graySidewaysNub.png"></img>
                <p class="rightMainP">Wow, I think this above answer is stupid...</p>
        </div>
    </div>
</div>



<script>

$('.answerSpace').bind('focus', function(){ $('.opacProf').removeClass("opacProf").addClass('normProf');

$('.answerSubmit').stop().animate({

    opacity: "1"

    }, 500 );
$('.answerSpace').css({'background-color' : '#ffffff', 'color' : '#333'}); });


$('.rightMainP').hover(function(){$('#rightMain img:first-child').attr('src','../Images/whiteSidewaysNub.png')},function(){$('#rightMain img:first-child').attr('src','../Images/graySidewaysNub.png')});


</script>

HTML ID's are UNIQUE although you can write two of them in code, you're breaking standards by doing so... Switch to a class instead of an ID first of all...

Secondly, you can use the .find() method on this in your hover function assuming that the image you're looking for is a CHILD of the element you are hovering:

$('.rightMainP').hover(function() {
    $(this).find('.rightMain img:first-child')
         .attr('src', '../Images/whiteSidewaysNub.png')
}, function() {
    $(this).find('.rightMain img:first-child')
         .attr('src', '../Images/graySidewaysNub.png')
});

You can use a slightly different syntax, which is $( selector, context ) - Internally jQuery basically returns $( context ).find( selector ).

Updated: OP posted some html

Looking at your HTML I would first suggest that you bind the "hover" event on the .rightMain (after you turn it into a class):

$('.rightMain').hover(function() {
    $( this ).find('img:first-child').attr('src', '../Images/whiteSidewaysNub.png');
}, function() {
    $( this ).find('img:first-child').attr('src', '../Images/graySidewaysNub.png');
});

You could even go a step further down the "cleaner code" line and do something like this:

CSS:

.rightMain div.nub { 
   background-image:url(/Images/whiteSidewaysNub.png);
   width: 10px; /* obviously guessing at this value here.. */
   height: 10px; /* obviously guessing at this value here.. */
}

 /* works in a lot of new browsers without ANY JS - see
    http://www.quirksmode.org/css/contents.html#t16 */
.rightMain:hover div.nub,
 /* just in case you want to support IE6 / use a class! */
.rightMain.hovered div.nub {
   background-image: url(/Images/graySidewaysNub.png);
}

JavaScript (if you want to support the evil IE6 )

$(".rightMain").hover(function() { $(this).toggleClass('hovered'); });

HTML:

<div class="rightMain">
   <!-- instead of the image -->
   <div class='nub'> </div>
   <!-- the rest of your stuff -->
</div>

A demo (without IE6 support) is here: http://jsfiddle.net/gnarf/u7gVA/

I would generally ignore the IE6 support, and just move on with the code, no need for JavaScript to handle this...

First of all, you shouldn't have multiple elements with the same id. IDs are supposed to be unique identifiers. Use classes for that.

Another thing you can do is make use of the this keyword. Do:

$(this).stuff instead of $(#id).stuff. this will be the element that you are hovering over.

http://jsfiddle.net/YQgTj/

You can stay within the scope of a selector by using "selector, this".

$('.rightMain').hover(function() {
    $('.graySidewaysNub', this).attr('src','http://jsfiddle.net/img/keys.png')
}, function() {
    $('.graySidewaysNub', this).attr('src','http://jsfiddle.net/img/logo.png')
});

Definitely use class and not id. I associate id with the word 'individual' - one and only one, ever. One head, foot, body.

I didn't see the need to use :first-child, since you use a class of 'graySidewaysNub' on the image you wish to change.

If you wanted to use a more abstract approach, you could also use: $('img:first-child', this).attr('src','http://jsfiddle.net/img/keys.png'), which would grab the first occurance of an img within 'rightMain'.

Here is what you can do:

jQuery(".rightMainP").hover(function(){
  jQuery(this).parent().find("img:first").attr({"src","../Images/whiteSidewaysNub.png"});
},function(){
  jQuery(this).parent().find("img:first").attr({"src","../Images/graySidewaysNub.png"});
});