Consider the HTML:
<div class="member">
<h1>Name of Member #1</h1>
<div class="member-detail">
...lots of stuff...
</div><!-- end of member-detail -->
</div><!-- end of member -->
<div class="member">
<h1>Name of Member #2</h1>
<div class="member-detail">
...lots of stuff...
</div><!-- end of member-detail -->
</div><!-- end of member -->
I would like to operate on "div.member-detail" when ".member h1" is clicked. I've tried many things, none of which have worked. Here is just one that I've tried:
$(this).parent().child("div.member-detail").css("background-color" , "#9f9");
I'm expecting this to read like:
$(this) is the h1 that was clicked;
The parent of h1 is div.member;
The child of div.member that matches is "div.member-detail";
The background-color of "div.member-detail" is set.
Like the others I've tried, it's a total miss. No background color is set anywhere, whereas:
$(this).parent().css("background-color" , "#9f9");
works just fine to operate on the parent div.
Please note: I intend to replace the .css() action with a .toggle() once I get the selector to work.
HELP ME. I'm getting such a headache !