Try something like:
function () {
// get all table ancestors
var tables = $(this).parents('table');
// get the inner-most table
var table = $(tables[tables.length-1]);
$('.extended', table).toggleClass('hidden');
}
Alternately, you could just use dom traversal:
$(this).parent().parent().next('.extended').toggleClass('hidden')
On Nov 6, 8:34 am, Evan <[EMAIL PROTECTED]> wrote:
> Hello,
>
> I am having difficulties with selectors...I've been reading through
> the selector API and this group for a while now, and I can't seem to
> figure out the answer.
>
> I want to toggle the class "hidden" on the 2nd <tr> below (.extended)
> when the <img> in the previous row is clicked.
>
> This seems to work:
>
> $("td.click img").click(function () {$("#listing
> tr.extended").toggleClass("hidden");});
>
> However this table is repeated many times throughout the page, and
> this code toggles the class on ALL the tables. Is there a way to
> target only the next table row in the table that is being clicked?
>
> <table class="listing">
> <tr>
> <td class="click"><img src="#" /></td>
> <td></td>
> </tr>
> <tr class="extended hidden">
> <td></td>
> <td></td>
> </tr>
> </table>
>
> Any help would be a lifesaver, and greatly appreciated! Thank you!
