Question

如何从最近的子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();

所有尝试都失败了。如何从最近的子菜单中获取父值？

Answer 1

找到了解决方案：

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

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

});

Answer 2

首先，您的表结构不正确。

如果不定义子表，则无法嵌套<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/

单击“First Child”输入，它将突出显示该孩子之前的“First Parent”。

JQuery在嵌套tr中找到最接近的父tr

2 个答案: