Question

我正在尝试使用＆＃34; row＆＃34;的内容来构建模态。元素。这可能是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中，我试图找到＆＃34;父母＆＃34;或者＆＃34;最近的＆＃34; data-uuid的元素与我从html中点击的元素data-delete-uuid获得的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，因为event.relatedTarget事件可能未定义show.bs.modal。请参阅jQuery documentation，其中仅指定有关mouseout和mouseover事件的信息。

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

2 个答案: