javascript - 两个节点之间的jquery DOM距离

Question

我有一个包含很多嵌套元素的 html 页面。我正在尝试查找两个节点之间的 DOM 距离，以便我可以选择视觉同级节点，即使它们不是 DOM 同级节点。

  <div class='root'>
    <div class='wrapper'>
      <div class='family brother'>
        <div class='otherstuff'>Other Stuff</div>
      </div>
    </div>
    <div class='wrapper'>
      <div class='family sister'>
        <div class='otherstuff'>More Stuff</div>
        <div class='wrapper>
          <div class='family nephew'>
            <div class='otherstuff'>Yet more stuff</div>
          </div>
        </div>
      </div>
    </div>
  </div>

因此，使用 jQuery:

var root = $(".root");
var siblings = root.find(".family");

但是那会选择 sibling 和侄子。

我不会用

var siblings = root.find(".wrapper>.family");

因为这也将匹配所有三个。

我不能用

var siblings = $(".root>.wrapper>.family");

因为根据模板可能还有其他包装元素。

我正在寻找的是:给定 .root 下的 .brother，通过计算从 .brother 到 .root 的 DOM(分层)距离是否与另一个 .family 的距离匹配来告诉我另一个 .family 是否是“兄弟”。来自 .root 的家庭成员。结果集应仅包含 .brother 和 .sister，但不包含 .nephew。

Answer 1

这可以通过 JQuery.closest() 来完成

它将返回与您的目标元素最接近的匹配元素。

阅读此处的文档:http://api.jquery.com/closest/