当我只有 HTML 字符串 X 时，我如何找到最接近的元素

Question

我需要使用 onClick(swiper,e) 为 Swipeper JS 中的链接错误制定解决方法。

swiper：是整个刷卡容器
e ： 是一个 MouseEvent，其中属性 target 包含 HTML 字符串，例如 <div class="start-time">16:00</div>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">
      <a href="abc" target="_blank">
        <div class="start-time">16:00</div>
        <div class="flag"><img ...></div>
        <div class="name col-4">Buritos</div>
      </a>
    </div>
    ...
  </div>
</div>

现在我需要防止默认的滑动器行为，找到链接并打开一个新窗口。这段代码不起作用，而是我想要的伪代码

    onClick: function(swiper, e) {
        e.preventDefault();
        let target = $(e.target); // HTML is now jQuery
        let slide = target.closest('swiper-slide'); //Not working
        let link = slide.find('a').attr('href');
        window.open(link);
    },

当用户单击幻灯片中的任何元素时，我无法找到父swiper-slide。我以为target.closest('swiper-slide')会做到这一点，但事实并非如此。

任何帮助非常感谢。

Answer 1

这应该有效：

onClick: function(swiper, e) {
    e.preventDefault();
    var hyperlink = $(e.target).closest('a');
    window.open(hyperlink.attr('href'));
},

Answer 2

您可以使用

$.parents()从单击的元素向上遍历多个级别，并通过选择器来查找所需的元素，如下所示：

onClick: function(swiper, e) {
    e.preventDefault();
    let target = $(e.target); // HTML is now jQuery
    let slide = target.parents('.swiper-slide')[0];
    let link = slide.find('a').attr('href');
    window.open(link);
},