Selecting a child image of a clicked element in jQuery

Question

So I have HTML:

<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 the down.png arrow when clicked.

How can I do it?

Here is what I still have:

 $('.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 element, not each.

Answer 1

The syntax is incorrect.

after . you need to use the method name

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

Alternatively you can use this syntax

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

which uses this as a context to search.

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