jQuery 查找表单文本输入的父行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8094472/
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
Finding parent row of form text input
提问by Josh Earl
I'm trying to use data- attributes in an HTML table to store data about an item that will later be used in an ajax call, but I'm having trouble with my jQuery selection when I try to get the data back out.
我正在尝试在 HTML 表中使用 data- 属性来存储有关稍后将在 ajax 调用中使用的项目的数据，但是当我尝试取回数据时，我的 jQuery 选择遇到了问题。
This works:
这有效：
var listItemId = $(this).parent().parent().attr('data-id');
However, the .parent().parent()selector is too fragile--it'll break if I ever change my HTML structure.
然而，.parent().parent()选择器太脆弱了——如果我改变我的 HTML 结构，它就会损坏。
This is what I'd like to do, but it is returning undefined:
这是我想要做的，但它返回未定义：
var listItemId = $(this).parent('.list-item').attr('data-id');
My HTML looks like this:
我的 HTML 如下所示：
<tr class="list-item" data-id="1">
<td>
<input value="Some text entered by the user" type="text" >
</td>
</tr>
What am I missing?
我错过了什么？
回答by roselan
internally, jquery uses .closest for this kind of stuff.
在内部，jquery 使用 .closest 来处理这种东西。
var listItemId = $(this).closest('tr').attr('data-id');
moreover if you have nested tables (which I never saw, but we never know), you have to select the first 'tr' too. (it's more useful with looking for divs than rows though). However, for code unification, I never use parents when I need closest. That way, the function names implies it's meaning exactly (closest parent), while .parents() leaves more room to interpretation, and thus reduce code readability (imo)
此外，如果您有嵌套表（我从未见过，但我们永远不知道），您也必须选择第一个“tr”。（虽然查找 div 比查找行更有用）。然而，为了代码统一，当我需要最接近的时候，我从不使用父母。这样，函数名称就意味着它的意思（最接近的父级），而 .parents() 留下了更多的解释空间，从而降低了代码的可读性（imo）
performance wise, they are equivalent (check this jsperf)
性能方面，它们是等效的（检查这个 jsperf）
finally, you can consider a pure javasrcipt approache too: parentNode (by miles faster than anything else, if you really need speed)
最后，你也可以考虑使用纯 javasrcipt 方法：parentNode（比其他任何东西都快几英里，如果你真的需要速度）
in your case:
在你的情况下：
var listItemId = $(this.parentNode.parentNode).attr('data-id');
or
或者
var listItemId = this.parentNode.parentNode.attributes['data-id'].value;
NB: pure javascript methods need valid html to work, unlike the one in your question (close your input tag, and add a table one).
注意：纯 javascript 方法需要有效的 html 才能工作，这与您问题中的方法不同（关闭输入标签，并添加一个表格）。
回答by Manuel van Rijn
回答by arb
I would suggest:
我会建议：
var listItemId = $(this).parents('tr').data('id');
The class selector is the slowest of all the jQuery selectors and should avoided unless there is no other way to go the information you need.
类选择器是所有 jQuery 选择器中最慢的，应该避免使用，除非没有其他方法可以获取您需要的信息。
UPDATE
更新
I fixed the syntax to make use of the .data()method correctly. This way only works in version 1.4.3 or higher.
我修复了语法以.data()正确使用该方法。这种方式仅适用于 1.4.3 或更高版本。
回答by nafsin vattakandy
$(this).closest('tr').attr('data-id');
This will be the best solution for your problem. The code will not be depended on you html structure, unless you introduce new <tr> tag in between
这将是您问题的最佳解决方案。代码不会依赖于你的 html 结构，除非你在两者之间引入新的 <tr> 标签
