CODEWITHSUNDEEP
jquery
StuffandBlah
StuffandBlah

Reputation: 1067

Jquery traversing images

I'm trying to write a way of handling a button press so that a div can expand & collapse and a button updates from reading 'open' to 'hide' (along with updating ALT tags). The toggling part is fine. I just can't get my head around the traversing aspects.

Two buttons are presented but CSS is applied so only one is shown (the open one). When clicked the hideImage needs to be visible and the openImage needs to be removed. Pretty straightforward.

Here is the HTML: 

<tr>
<td>text</td>
<td class="tdclass"><a href="" class="hrefclass"><img src="openImage.gif" class="openImage" border="1"></a>
<td class="tdclass"><a href="" class="hrefclass"><img src="hideImage.gif" class="hideImage hiddenImage" border="1"></a></td>
</tr>

Is there an easy way of doing this with JQuery?

Also, why doesn't this work?

$('.openImage').parent().parent().find('.hideImage')

I have assumed that I can traverse back up to the and find the 'hideImage' class.

Help!

Upvotes: 0

Views: 106

Answers (1)

Nick Craver
Nick Craver

Reputation: 630409

The second parent is the <td>, not the <tr>, since there's an <a> too, you're probably better off with .closest() here, like this:

$('.openImage').closest('tr').find('.hideImage')

...or add a third .parent(), either works, but .closest() tends to be more future-friendly with layout changes.

Upvotes: 2

Related Questions