使用JQuery查找最近的选择器？

Question

对于下面的HTML和JQuery，前两个closest()调用找到了期望的元素，但第三个调用找不到header元素。有没有办法使用jquery找到它？

<div class="top">
  <div class="header"></div>
  <div class="body>
    <a href="#" class="js-clickable">clickable</a>
  </div>
</div>

$('.js-clickable').on('click', function (data) {

  var clickable = $(data.toElement);

  var top= clickable.closest('.top');
  var body= clickable.closest('.body');
  var header = clickable.closest('.header');

});

Answer 1

这是适合您用例的选择器：

var header = clickable.closest("*:has(.header)").find(".header");

Answer 2

因为标题不是祖先，所以你可以采取两种方式。

var header = clickable.closest('.body').prev('.header');

你也可以去点击的祖父母，然后回来。

Answer 3

变化：

var header = button.closest('.header');

要：

var header = button.closest('.top').find('.header');

点击此处了解详情：https://api.jquery.com/closest/

Answer 4

这样可行：

var header = clickable.closest('.body').prev('.header');