通过数据属性获取元素

Posted 2023-05-08

【中文标题】通过数据属性获取元素

【英文标题】：get element by data attribute

【发布时间】：2022-01-15 01:35:39

【问题描述】：

我有这个 html 结构：

<table id="table">
   <tr data-id="3">
      <td>08.09.2021</td>
      <td><div class="btnDelete">Delete</div></td>
   </tr>
</table>

还有这个 onclick 功能：

var myID = 3;
$(".btnDelete").click(function() 
    
   console.log(
      $('#table').parents('tr').find("[data-id='" + myID + "']").html()
   )

)

结果将是“未定义”。

var myID = 3;
$(".btnDelete").click(function() 
    
   console.log(
      $('#table').parents('tr').find("[data-id='" + myID + "']").html()
   )

)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
   <tr data-id="3">
      <td>08.09.2021</td>
      <td><div class="btnDelete">Delete</div></td>
   </tr>
</table>

我想获取<tr data-id="3"> 的html 部分并通过数据属性“data-id”搜索该元素。但是我的方法行不通。

我的错误在哪里？

【问题讨论】：

parents() 上升 DOM，而不是下降。只需删除该方法：$('#table').find("[data-id='" + exportID + "']").html()

总是 调试你的选择器 - 似乎 90%（轶事）人们问像 .html() 不起作用 这样的问题，他们只是有错误的选择器。 console.log($("#table").length, $('#table').parents('tr').length, $('#table').parents('tr').find("[data-id='" + myID + "']").length) 会很快告诉你问题出在哪里（假设你没有嵌套表，但是你不会知道你有一个错误，因为它仍然“工作”）

【参考方案1】：

这是你的错误：

  $('#table').parents('tr').find("[data-id='" + myID + "']").html()

应该是：

  $('#table').find("[data-id='" + myID + "']").html()

【参考方案2】：

ID 为 table 的元素在您提供的 HTML 中没有任何 tr 元素的祖先（parents 函数搜索祖先而不仅仅是父母）。

去掉那个子句。