javascript - jQuery find highest parent TD - Stack Overflow

admin管理员组

文章数量:1173665

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?

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?

• javascript
• jquery
• html

Share Improve this question Follow asked Nov 16, 2011 at 22:43 ZakZak 2,69844 gold badges3030 silver badges4646 bronze badges

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 25

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

Try doing this:

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

I'd suggest trying:

 $(this).parents("td").last()

It will find all table cell ancestors of the current element. The last one should contain the highest level table cell element.

you can try:

$(this).parents('td:last');

or

$(this).parents('td').last();

Give your top-level td element a class name:

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


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

Quick&dirty :)

$(this).parents('td')[--$(this).parents('td').length]

本文标签： javascriptjQuery find highest parent TDStack Overflow