javascript - 如何在 javascript/jquery 中找到“最深”div 的类名？

Question

我知道 e.target 包含光标下方元素的信息，但是如果我想知道其中有一个 table>tr>td> 按钮的 div 的类名并且我正在单击该按钮怎么办在那个td里面。我知道这个事件会冒泡，应该有办法找出 div 是否存在于那个冒泡的关卡中。任何帮助。

场景：按钮位于模态窗口内。如何在单击其中的按钮时找到模态窗口类名称。

Answer 1

用于.closest()向上遍历 DOM 到最近的匹配：

var parentDiv = $(yourButton).closest('div');

或者在按钮的click：

$(yourButton).click(function() {
  var nearestParentDiv = $(this).closest('div');
  // And read its class
  console.log(nearestParentDiv.attr('class'));
});

选择器.closest()接受当然可以比这更具体，所以如果模态窗口<div>有一些已知的类但你需要检查它的其他类，你应该使用更具体的选择器。

Answer 2

是的，正如你所说，事件会冒泡到你的 div，所以只需让 div 用 处理事件.on()，如下所示：

$('#yourdiv').on('click',':button',function(e) {
   alert( $(e.delegateTarget).attr('class') );//alerts the classes of #yourdiv
   alert( $(this).attr('id'));//alerts the id of the clicked button (if have one)
});

更新：
修复了获取对附加事件的原始 div 的引用。使用来自Event 对象的event.delegateTarget。感谢 Cristophe 和 Kevin B. 发现错误。

查看工作演示

Answer 3

您可以使用.parent()获取父 div 属性，如 id：http: //jsbin.com/ololad/1/edit

$('button').click(function(){
    console.log($(this).parent().attr('id'));
});