Question

I have some HTML that looks like this:

<div>
  <div class="value">
    <a href="#" class="clicker">Some Value</a>
  </div>
  <div class="heading">
    Some Name<img src="loading.gif" style="visibility:hidden">
  </div>
</div>

This could repeat several times, depending on how many values and headings need to be listed. Using jQuery, I’ve attached a function to happen when the a.clicker is clicked. As a part of what happens, I’d like to call show() on the .heading img below it. However, I just can’t get my head around how this is supposed to be selected.

$('a.clicker').live("click", function() {

  // This next line, in my brain, works, but in reality it doesn't!
  $('.heading img', $(this).parent().parent()).show();

  // do some other AJAXy things
});

I’ve marked the line that I think should do it, but it’s not showing the img at all. I’ve been poring over the documentation and soflow for a couple of hours without success.

Thanks for any assistance!

Answer 1

You just have a few things in the wrong places. Very close though.

$('a.clicker').live("click", function() {
    $(this).parent().parent().find('.heading img').show();
});

This could also be solved a second way:

$('a.clicker').live("click", function() {
    $(this).parent().next('.heading img').show();
});