Question

HTML

<div id="header_area">
    <div id="favuorites_header_wrapper" class="header_item">
        <div id="favuorites_header_font" class="noSelect">Open Menue</div>
        <div id="favuorites_header_icon" class="noSelect"></div>
    </div>
</div>

在上面的代码中，favuorites_header_wrapper是header_area的子代。和 favuorites_header_font，favuorites_header_icon是favuorites_header_wrapper的孩子。

现在，使用jQuery，我想提醒根父（即header_area）你是否被点击了header_area的子项或子项。谢谢你的努力。

编辑：每当您点击其中的元素时，我想获取容器div的ID（即header_area）。

我正在使用

alert((e.target || e.srcElement).parentNode.id);

但它返回的是相应的父母而非Container Div ID。

Answer 1

使用.closest()

$('#header_area div').click(function() {
    var parent_header_area = $(this).closest('#header_area');
});

或使用.parents()

$('#header_area div').click(function() {
    var parent_header_area = $(this).parents('#header_area');
});

Answer 2

您可以使用：

$("#header_area").find();

这将返回所有儿童和子女。然后，您可以向找到的元素添加单击处理程序。可以找到here

的解释

Answer 3

我不确定'提醒header_area'是什么意思，但您可以使用closest()选择它：

$('#header_area div').click(function() {
    var $header_area = $(this).closest('#header_area');
    // do something eg. alert the id...
    alert($header_area.prop('id'));
});

Answer 4

$('.header_area div').click(function() {
    alert($(this).parents('.header_area'));
});

Answer 5

尝试这种方式：

$('[id^="favuorites_header"]').click(function(e){
   e.stopPropagation();
   var parent = $(this).closest('[id^="header_"]').attr('id');
   alert(parent);
});

Fiddle

使用jQuery获取root父级

5 个答案: