Question

您好我有以下HTML代码

<div id='parentDiv'>
    <div class='firstDiv'>
         <div class='firstDivChild1'></div>
         <div class='firstDivChild2'>
              <div class='firstDivChild2_Child1'></div>
              <div class='firstDivChild2_Child2'></div>
         </div>
    </div>
    <div class='secondDiv'>
         <div class='secondDivChild1'>
              <div class='secondDivChild1_child'>
                   <div class='secondDivChild1_child_child'></div>
              </div>
         </div>
    </div>
</div>

现在我的要求是当我点击任何div时我想获得最顶级的父ID（即parentDiv）。目前我正在使用以下脚本来获取父ID。

<script type='text/javascript'>
$('div').click(function(e){
   var parentDivId = (e.target).parentNode.id;
   alert(parentDivId );
});
</script>

但它不起作用。任何人都可以更正此代码以达到我的要求。提前致谢。

Answer 1

如果父DIV在文档中是唯一的，那么您只需通过ID引用它，即$（'＃parentDiv'），但如果不是，那么您应该更改HTML并添加到 parentDiv < / strong>某个类（即parentDiv），你可以通过这个表达式引用它$（this）.parents（'。parentDiv：first'）;

Answer 2

然后使用the natural power of event bubbling。点击任何后代都会向上冒泡（因此冒泡），并且就像点击父级一样。因此，向父母添加点击处理程序也会做同样的事情。

$('#parentDiv').on('click',function(){
    var id = this.id
});

Answer 3

$('div').click(function() {
    alert($(this).parents('div').last().attr('id'));
    return false;
});

Live DEMO

Answer 4

尝试这个小功能：

$.fn.root = function() {
  var $all = $( this[0] ).parents(); 

  // omit "html", "body" and one index to the last item;
  return $all.slice( $all.length - 3, $all.length - 2 );
};

样本用法：

$('input').click(function() {
    alert($(this).root().prop('id'));
});

Simple working example using your HTML here

Answer 5

你所要求的仍然不是很明显，但根据你的一些评论，这是我最好的猜测。

使用事件冒泡，您可以检查文档中的所有点击，然后确定点击源自e.target的位置，然后您可以确定该点击是否来自您的div树或其他地方：

$(document).click(function(e) {
    // determine if click was in our div tree or not
    if ($(event.target).closest("#parentDiv").length) {
        // click was in our parentDiv tree
    } else {
        // click was not in our parentDiv tree
    }
});

无论点击位于何处，您都可以随时使用此jQuery获取div树id="parentDiv"的顶部：

$("#parentDiv")

如果，您只想要最高的div超出所点击的内容，无论文档中的点击位于何处，您都可以使用这样的事件冒泡来实现：

$(document).click(function(e) {
    e.stopPropagation();
    var topMostDiv = $(e.target).parents("div").last();
    // do whatever you want with topMostDiv here
});

当我点击其中任何一个子元素时，如何获得最顶级的父ID？

5 个答案: