jQuery JQuery在嵌套的tr中找到最近的父tr
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14634564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery find closest parent tr in nested tr
提问by someone
How can I find the parent tr from the closest child tr e.g. from the second child tr, how can I get to the first parent tr?
如何从最近的子 tr 中找到父 tr，例如从第二个子 tr 中找到父 tr，我怎样才能找到第一个父 tr？
Below are two table structures I have been using:
下面是我一直在使用的两个表结构：
1)
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)
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>
I have tried the following JQuery code:
我尝试了以下 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();
All attempts have failed. How can I get the parent value from the closest sub menu tr?
所有的尝试都失败了。如何从最近的子菜单 tr 中获取父值？
回答by Axel
First of all, your table structures are incorrect.
首先，您的表结构不正确。
You cannot nest <tr>tags, without defining a sub-table.
您不能在不<tr>定义子表的情况下嵌套标签。
I've fixed your table structure, and provided some jQuery that does what I think you're trying to do. Why you're using tables and inputs for a menu is beyond me.
我已经修复了你的表结构，并提供了一些 jQuery 来完成我认为你正在尝试做的事情。为什么你在菜单中使用表格和输入是我无法理解的。
HTML:
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(for visual effect):
CSS（用于视觉效果）：
table td { padding: 10px; }
jQuery:
jQuery：
$('.firstchild').click(function() {
var $this = $(this);
$this.parents('tr').prev().css("background-color", "yellow");
});
You can view the results here: http://jsfiddle.net/357tE/
您可以在此处查看结果：http: //jsfiddle.net/357tE/
Click on the "First Child" inputs, and it will highlight the "First Parent" that comes before that child.
单击“第一个孩子”输入，它将突出显示该孩子之前的“第一个父母”。
回答by someone
found the solution:
找到了解决办法：
$('.child').click(function() {
var $this = $(this);
$this.parents('tr').prevAll("tr.menu:first").css("background-color", "yellow");
});
