-1

嗨，我有以下 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>

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

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

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

4

5 回答 5

2

如果该父 DIV 在文档中是唯一的，那么您可以通过 ID 引用它，即 $('#parentDiv')，但如果不是，那么您应该更改您的 HTML 并向parentDiv添加一些类（即 parentDiv），你可以通过这个表达式引用它 $(this).parents('.parentDiv:first');

于 2012-04-19T10:45:26.983 回答
1

然后使用事件冒泡的自然力量。任何点击的后代都会向上冒泡事件（因此冒泡），并且就像点击父级一样。所以向父级添加点击处理程序也可以做同样的事情。

$('#parentDiv').on('click',function(){
    var id = this.id
});
于 2012-04-19T05:18:10.463 回答
1 
$('div').click(function() {
    alert($(this).parents('div').last().attr('id'));
    return false;
});​

现场演示

于 2012-04-19T10:51:24.197 回答
1

试试这个小功能：

$.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'));
});​

在此处使用您的 HTML 的简单工作示例

于 2012-04-19T11:05:32.293 回答
0

您的要求仍然不完全清楚，但根据您的一些评论，这是我最好的猜测。

使用事件冒泡，您可以检查文档中的所有点击，然后确定点击的来源，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
    }
});

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

$("#parentDiv")

如果，您只想要点击内容上方的最顶层 div，则无论点击在文档中的哪个位置，您都可以使用这样的事件冒泡来获得：

$(document).click(function(e) {
    e.stopPropagation();
    var topMostDiv = $(e.target).parents("div").last();
    // do whatever you want with topMostDiv here
});
于 2012-04-19T10:49:16.000 回答