javascript - 向上遍历，然后向下遍历 DOM

Question

我有一个单击事件设置，并且在其代码块内存储某些同级元素的值。现在，如果我想在单击 .play 按钮后在 .title 范围内显示文本，我必须向上两层并返回到 。标题.

我想知道从包装在两个或多个父 div 中的同级元素访问信息的更好方法是什么？

HTML

<table>
  <tr>
    <td>
      <button class="play">Play</button>
    </td>
    <td>
      <span class="number">01.</span>
    </td>
    <td>
      <span class="title">Track 1</span>
    </td>
  </tr>
  <tr>
    <td>
      <button class="play">Play</button>
    </td>
    <td>
      <span class="number">02.</span>
    </td>
    <td>
      <span class="title">Track 2</span>
    </td>
  </tr>
</table>

JS

$(function() {
  $(".play").on("click", function() {
    var number = $(this).parent().parent().find(".number").text(),
    title      = $(this).parent().parent().find(".title").text();

    console.log(number + title);
  });
});

Answer 1

您可以使用 jQuery 的 closest() 函数。

var number = $(this).closest('tr').find(".number").text(),
title      = $(this).closest('tr').find(".title").text();