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为length大于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

DEMO

$("*",".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
});

单击子项时，获取父级ID的n级别

4 个答案: