单击孩子时获取父级ID的n级

Question

我有这样的HTML

<div id=longId class="container">
    <p> .. 
    <p> ..
    <ul>
      <li>
      <li>
    </ul>
</div>

单击class =“ container” div中的任何子级时，我想获取div的ID。

$(document).on("click", ".container", function(e) {
    var docnumber = e.target.id.split("-")[0];  //sometimes the children fire this. their IDs are not set
    var docname = e.target.id.replace(docnumber + "-", "");
    loadDoc(docnumber, docname);
});

我可以使用适当的ID来标识每个HTML元素（并解析它们），或者使用jquery循环到ID长度大于1的父对象。但是有没有一种干净的方法？ 我知道，当您遇到相反的问题时（单击孩子时不解雇父母），您可以停止传播。

Answer 1

尝试使用最接近的函数（ http://api.jquery.com/closest/ ）：

$(".container").on("click", "*", function(e) {
    var id = $(this).closest(".container").attr("id"); 
    e.stopPropagation();
});

Answer 2

在处理程序内部， this是指.container元素，因此请使用：

var docnumber = this.id.split("-")[0];

Answer 3

演示

$("*",".container").on("click",function(e){
   alert($(this).closest(".container").attr("id"));
   e.stopPropagation();
});

Answer 4

$(document).on("click", ".container *", function(e) {
    var element_with_id = $(this).closest('[id]');
    var docname = $(this).attr('id').replace(/^.*?-/, "");
    loadDoc(docnumber, docname);
    e.stopPropagation(); // Prevent bubbling up to higher elements
});