查找表单文本输入的父行

Question

我正在尝试在HTML表格中使用数据属性来存储稍后将在ajax调用中使用的项目的数据，但是当我尝试获取数据时，我遇到了jQuery选择问题进行。

这有效：

var listItemId = $(this).parent().parent().attr('data-id');

然而，.parent().parent()选择器太脆弱了 - 如果我改变我的HTML结构，它会破坏。

这是我想要做的，但它返回undefined：

var listItemId = $(this).parent('.list-item').attr('data-id');

我的HTML看起来像这样：

<tr class="list-item" data-id="1">
   <td>
     <input value="Some text entered by the user" type="text" >
   </td>
</tr>

我错过了什么？

Answer 1

在内部，jquery使用.closest来处理这种事情。

var listItemId = $(this).closest('tr').attr('data-id');

此外，如果您有嵌套表（我从未见过，但我们永远不知道），您也必须选择第一个'tr'。 （虽然查找div而不是行更有用）。但是，对于代码统一，当我需要最接近时，我从不使用父母。这样，函数名称暗示它的确切含义（最接近的父级），而.parents（）为解释留下更多空间，从而降低代码可读性（imo）

表现方面，它们是等效的（检查this jsperf）

最后，你也可以考虑一个纯粹的javasrcipt方法：parentNode（如果你真的需要速度，比其他任何东西快几英里）

在你的情况下：

var listItemId = $(this.parentNode.parentNode).attr('data-id');

或

var listItemId = this.parentNode.parentNode.attributes['data-id'].value;

注意：纯javascript方法需要有效的html才能工作，不像你问题中的那个（关闭你的输入标签，并添加一个表）。

here is a little fiddle

Answer 2

尝试

var listItemId = $(this).parents('.list-item').attr('data-id');

parents()在树中上升，直到它与选择器匹配

Answer 3

我建议：

var listItemId = $(this).parents('tr').data('id');

类选择器是所有jQuery选择器中最慢的选择器，除非没有其他方法可以获取所需的信息，否则应该避免使用它。

<强>更新

我修改了语法以正确使用.data()方法。这种方式仅适用于1.4.3或更高版本。

Answer 4

$(this).closest('tr').attr('data-id');

这将是解决您问题的最佳方案。除非你引入新的＆lt; tr＆gt;，否则代码将不依赖于你的html结构。标签介于

之间