Question

I’m working on a code for a form contained within a table. I’m writing (with jQuery) a function to highlight the parent <td> of each <input> element. That part is simple – the code is just:

$('.myForm input').click(function(){
    $(this).parent().addClass('active');
    })

The more complicated part is that some text fields are inside of a second table nested within a <td> of the first table. It would look like:

<table>
    <tr>
        <td> <--cell I want to add the class to
            <table>
                <tr>
                    <td><input type='text'></td>
                </tr>
            </table>
        </td>
     </tr>
</table>

So my question is this: is there a way to use one jQuery statement to find the highest parent <td> of the <input> element? So in other words, can I combine:

$('.myForm input').click(function(){
    $(this).parent().addClass('active');
    })

and

$('.myForm input').click(function(){
    $(this).parent().parent().addClass('active');
    })

into one function?

Answer 1

The best solution is to add a class to the table you actually want to target. This means that you could update the markup in future without necessarily breaking the JS, by doing something like $(this).closest('.targetElement').addClass('active').

If you can’t do that, you can use parents('td').last(). This selects all td parent elements and then gets the last one.

$('.myForm input').click(function(){
    $(this).parents('td').last().addClass('active');
})

See the jQuery manual:

• closest
• parents
• last