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

Question

我需要使用 onClick(swiper,e) 解决 Swiper JS 中的 link 错误。

swiper: 是整个swiper-container
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>

现在我需要阻止默认的 Swiper 行为，找到 link 并打开一个新的 window。这段代码不工作，但是我想要它的伪代码

    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

你可以使用$.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);
},

Answer 2

这应该有效：

onClick: function(swiper, e) {
    e.preventDefault();

    var hyperlink = $(e.target).closest('a');

    window.open(hyperlink.attr('href'));
},

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

How can I find closest element when all I have is HTML string X?

jquery

swiper