当我单击其任何一个子元素时，如何获取最顶层的父 ID？

Question

I have the following HTML code:

<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>

Now my requirement is when I click on any div I want to get an top most parent Id (ie parentDiv ). Presently I'm using the below script to get parent Id:

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

but it doesn't work. Can anyone correct this code to reach my requirement?

Answer 1

If that parent DIV is unique across document, then you just can refer to it by ID, ie $('#parentDiv'), but if it's not, then you should change your HTML and add to parentDiv some class (ie parentDiv), and you'll be able to refer to it by this expression $(this).parents('.parentDiv:first');

Answer 2

then use the natural power of event bubbling . any descendant clicked will bubble up the event upwards (hence bubble) and will act as if the parent is clicked. so adding a click handler to the parent also does the same thing.

$('#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

Try this little function:

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

Sample Usage:

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

Simple working example using your HTML here

Answer 5

It is still not completely obvious what you're asking for, but based on a few of your comments, here's my best guess.

Using event bubbling, you can examine all clicks in your document and you then determine where the click originated with e.target and you can then figure out whether that click originated in your div tree or elsewhere:

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

Regardless of where the click was located, you can get the top of your div tree id="parentDiv" at any time with this with this jQuery:

$("#parentDiv")

If, you just want the top-most div that is above what is clicked, no matter where the click is in the document, you can use event bubbling like this to get that:

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