jquery - 查找表单文本输入的父行

Question

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

这个有效:

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

但是，.parent().parent() 选择器太脆弱了——如果我改变我的 HTML 结构，它就会崩溃。

这是我想做的，但它返回未定义:

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 比查找行更有用)。但是，为了代码统一，我从不在需要 closest 时使用 parents。这样，函数名称暗示它的意思是(最近的父)，而 .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