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

Posted 2023-05-09

【中文标题】向上遍历，然后向下遍历 DOM

【英文标题】：Traversing up, then back down the DOM

【发布时间】：2015-07-13 07:55:04

【问题描述】：

我有一个点击事件设置，在它的代码块中我存储了某些同级元素的值。现在，如果我想在单击.play 按钮后将文本放在.title 范围内，我必须向上两层并返回到.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);
  );
);

【问题讨论】：

只要用$(this).grandParent().find(".title").text()就可以高效的上两个父母

如果我错了请纠正我，但我认为 grandParent() 甚至不存在于 jQuery API 中。

定位所需选择器的方法很多，但.closest('tr').find('title') 函数既简单又好用。

【参考方案1】：

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

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

【参考方案2】：

您可以使用closest() 回到共同的父母

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

fiddle