javascript - 使用 jQuery 返回隐藏的 值

Question

它在 tbody 中有更多行，在实际示例中具有实际值(它根据搜索添加来自 API 的结果)。

我想单击一行，然后我希望通过 console.log 返回该行中轨道 ID 的值。它隐藏在 CSS 中:

$("tbody").click(function() {
  var $songId = $(this).closest("tr").find(".hidden").text();
  console.log($songId);
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="song-table" id="results-table">
  <thead>
    <tr>
      <th class="subtitle-text">Track</th>
      <th class="subtitle-text">Artist</th>
      <th class="subtitle-text">Album</th>
      <th class="hidden" id="song-id">ID</th>
    </tr>
  </thead>
  <tbody id="search-results-body">
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class="hidden">Track ID </td>
    </tr>
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class="hidden">Track ID </td>
    </tr>
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class="hidden">Track ID </td>
    </tr>
  </tbody>
</table>

这在控制台中返回为空白，我猜这是因为技术上不存在文本。如果我改用 html()，它会返回“undefined”。

任何地方都可以帮我返回隐藏行的值吗？

Answer 1

来自关于 .closest() 的 jQuery 文档:

Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.

所以你实际上永远不会在你的表中得到一个 tr 元素，因为你实际上是在告诉它寻找你表的父 tr 元素，这显然不是存在。