JQuery найти самый высокий родительский TD

Я работаю над кодом для формы, содержащейся в таблице. Я пишу (с jQuery) функцию, чтобы выделить родительский <td> для каждого элемента <input>. Эта часть проста - код просто:

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

Более сложная часть состоит в том, что некоторые текстовые поля находятся внутри второй таблицы, вложенной в <td> первой таблицы. Это будет выглядеть так:

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

Итак, мой вопрос заключается в следующем: существует ли способ использовать один оператор jQuery для поиска наивысшего родительского элемента <td> элемента <input>? Другими словами, могу ли я объединить:

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

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

в одну функцию?

Ответы

Ответ 1

Лучшим решением является добавление класса в таблицу, на которую вы хотите настроить таргетинг. Это означает, что вы могли бы обновить разметку в будущем, не нарушая при этом JS, выполнив что-то вроде $(this).closest('.targetElement').addClass('active').

Если вы не можете этого сделать, вы можете использовать parents('td').last(). Это выбирает все td родительские элементы, а затем получает последний.

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

См. руководство по jQuery:

Ответ 2

Попробуйте сделать это:

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

Ответ 3

Я предлагаю попробовать:

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

Он найдет всех предков ячейки таблицы текущего элемента. Последний должен содержать элемент ячейки таблицы высочайшего уровня.

Ответ 4

вы можете попробовать:

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

или

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

Ответ 5

Дайте элементу td верхнего уровня имя класса:

<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');
});

Ответ 6

Quick & dirty:)

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