使用jQuery獲取root父級

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();

這將歸還所有兒童和子女。 然后，您可以向找到的元素添加單擊處理程序。 可以在這里找到解釋

Answer 3

我不確定'alert the header_area'是什么意思，但你可以使用nearest 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);
});

小提琴