Question

I’ve got some HTML markup that looks like this:

 <tr>
    <td>
        <a href="javascript:void(0)" class="slideNextSlidable">Click Here</a>
    </td>
</tr>
<tr class="slidable">
    <td>
    <p>Hide me</p>
    </td>
</tr>

And my javascript / jquery:

$(function() {
    $('.slideNextSlidable').click(function() {
        $(this).parent().next('.slidable').hide();
    });
});​

However, this doesn’t seem to be getting the .slidable tr

I’m trying to hide the .slidable row that’s next (or nearest to) the clicked .slideNextSlidable link.

This is nested in a foreach loop (there are many of these rows)

See fiddle: http://jsfiddle.net/alexjamesbrown/Zx5sR/

Answer 1

Seems like you are looking for $.closest(). From the jQuery API docs:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

And then simply:

$('.slideNextSlidable').click(function() {
    $(this).closest('tr').next('.slidable').hide();
});