获取具有数据属性的父元素不起作用

Question

我正在尝试使用元素“行”的内容构建模式。 这可能是一个table或一组div ，所以我无法具体说明我的JS：

我的HTML是：

<div class="row" data-uuid='abc123'>
   ... more elements ...
   <div class='project-description'>blah blah</div>
   ... more elements ...
       <a href="#" class='btn' data-delete-uuid='abc123' data-toggle="modal" data-target="#delete">

HTML也可以是：

<table class="mytable">
<tbody>
   ... more rows and cells ...
   <tr data-uuid='abc123'>
       <td class='project-decription'>blah blah</td>
       <td>
           <a href="#" class='btn' data-delete-uuid='abc123' data-toggle="modal" data-target="#delete">
       </td>

在我的JS中，我试图找到data-uuid与从点击的html中的元素data-delete-uuid中获得data-uuid相匹配的data-uuid的“父”或“最接近”元素，且每个元素的结构都不同。

$('#delete').on('show.bs.modal', function (event) {

    var uuid = $(event.relatedTarget).attr('data-delete-uuid');

    var rowDelete = $(event.relatedTarget).closest('[data-uuid="' + uuid + '"]');

    console.log(rowDelete.find('.project-description').html()); <-- UNDEFINED
});

如果有任何区别，页面将始终包含两个带有data-uuid="abc123"元素。 我试图从按下的按钮中找到最接近的DOM。

我错过了什么？ 这不行吗？

Answer 1

您可能不需要jQuery。

这个简单的javascript会跳转到parentNode，从父级查找您要查找的内容，如果找不到，请继续跳转到DOM的根。

/**
 * @param {HTMLElement} entry
 * @param {string} selector
 * @return {HTMLElement | null}
 */ 
function closest(entry, selector) {
  var parent = entry;
  var element = null;

  while (parent && !element) {
    element = parent.querySelector(selector);
    parent = parent.parentNode;
  }
  return element;
}

Answer 2

您可能需要使用event.currentTarget或event.target因为show.bs.modal事件的event.relatedTarget可能是未定义的。 请参阅jQuery文档 ，其中仅指定有关mouseout和mouseover事件的信息。