Selecting a child image of a clicked on element in Jquery

Question

So I have the HTML like this:

<p class="agendaNav"><img class="rightArrow" src="/images/arrowright.png"> WEEK AT A GLANCE</p>
<p class="agendaNav"><img class="rightArrow" src="/images/arrowright.png"> MONDAY</p>
<p class="agendaNav"><img class="rightArrow" src="/images/arrowright.png"> TUESDAY</p>

In Jquery I want to change the src attribute from ArrowRight.png to arrowdown.png when it is clicked.

How would I do that?

Here is what I have so far:

$('.agendaNav').click(function(event){

    $(this).('.rightArrow').attr('src', '/images/arrowdown.png');
});

What am I doing Wrong?

Oh and I only want to change the Arrow of the clicked on element, not every single one.

There is another question [$(this) selector and children](http://stackoverflow.com/questions/306583/this-selector-and-children) might be able to solve your problem. — Theon Lin, Mar 29 '11 at 02:54

score 7 · Accepted Answer · answered Mar 29 '11 at 02:49

You syntax is wrong.

after the . you need to use the name of a method

$(this).find('.rightArrow').attr('src', '/images/arrowdown.png');

Alternatively you can use this syntax

$('.rightArrow', this).attr('src', '/images/arrowdown.png');

which uses the this as the context for where to search in.

reference: http://api.jquery.com/jQuery/#jQuery1

Selecting a child image of a clicked on element in Jquery

1 Answers1