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

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与我从单击的元素data-delete-uuid获得的uuid匹配code> 在 html 中，具有不同的结构。

$('#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 将跳转到一个父节点，从父节点查找您想要的内容，如果没有找到，则继续跳转到 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;
}