查找表单文本输入的父行

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)

性能方面,它们是等价的(检查这个jsperf)

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

在你的情况下:

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

要么

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

注意:纯javascript方法需要有效的html才能工作,不像你问题中的那个(关闭你的输入标签,并添加一个表).

这里有点小提琴