JQuery найти ближайший родительский tr во вложенном tr

Как найти родителя tr из ближайшего дочернего элемента tr, например, из второго дочернего элемента tr, как добраться до первого родительского элемента tr?

Ниже приведены две структуры таблиц, которые я использовал:

1)

 <table>
        <tr class="menu">
            <td><input type='text' class='parent' value='First Parent'></td>  
            <tr class="sub-menu">
                <td><input type='text' class='firstchild' value='First Child'>
                </td>

            </tr>
             <tr class="sub-menu">
                <td><input type='text' class='secondchild' value='Second Child'>
                </td>
            </tr>   
        </tr>
            <tr class="menu" >
            <td ><input type='text' class='parent' value='Second Parent'></td> 
            <tr class="sub-menu">
                <td><input type='text' class='firstchild' value='First Child'>
                </td>
                </tr>
            </tr>
    </table>

2)

    <table>
    <tr class="menu">
        <td><input type='text' class='parent' value='First Parent'></td>  
</tr>
        <tr class="sub-menu">
            <td><input type='text' class='child' value='First Child'>
            </td>
      </tr>

         <tr class="sub-menu">
            <td><input type='text' class='child' value='Second Child'>
            </td>
        </tr>   
    <tr  class="menu">

        <td><input type='text' class='parent' value='Second Parent'></td>  </tr>
        <tr class="sub-menu">
            <td><input type='text' class='child' value='First Child'>
            </td>
            </tr>

</table>

Я пробовал следующий код JQuery:

$(this).closest('tr.submenu').closest('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parent('tr.menu').find('.parent').val();

$(this).closest('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').prevUntil('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parentsUntil('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parents(':first-child').find('.parent').val();

Все попытки провалились. Как я могу получить родительское значение из ближайшего подменю tr?

Источник

2 ответа

Решение

Нашел решение:

$('.child').click(function() {
    var $this = $(this);

    $this.parents('tr').prevAll("tr.menu:first").css("background-color", "yellow");

});
Источник

Прежде всего, ваши таблицы структуры неверны.

Вы не можете вложить <tr> теги, без определения подстоли.

Я исправил структуру вашей таблицы и предоставил несколько jQuery, которые делают то, что я думаю, вы пытаетесь сделать. Почему вы используете таблицы и входные данные для меню, мне не понятно.

HTML:

<table>
     <tr class="menu">
         <td><input type='text' class='parent' value='First Parent' /></td>
     </tr>
     <tr class="sub-menu">
         <td><input type='text' class='firstchild' value='First Child' /></td>
     </tr>
     <tr class="sub-menu">
         <td><input type='text' class='secondchild' value='Second Child' /></td>  
     </tr>
     <tr class="menu" >
         <td ><input type='text' class='parent' value='Second Parent' /></td>
     </tr>
     <tr class="sub-menu">
         <td><input type='text' class='firstchild' value='First Child' /></td>
     </tr>
</table>

CSS (для визуального эффекта):

table td { padding: 10px; }

JQuery:

$('.firstchild').click(function() {
    var $this = $(this);

    $this.parents('tr').prev().css("background-color", "yellow");

});

Вы можете просмотреть результаты здесь: http://jsfiddle.net/357tE/

Нажмите на вход "Первый ребенок", и он выделит "Первый родитель", который предшествует этому ребенку.

Источник
Другие вопросы по тегам