Get the id of the child div alone using jquery

Question

I need the id of the child element alone which is clicked. If I use $(this).attr('id') it brings the id of the parent also.

Here is the code,

<body>
    <div id="divOne">
        <div id="divTwo">
            <div id="divThree">
                <div id="divFour">
                </div>
            </div>
        </div>
    </div>
</body>

I need the id of the div four alone when it is clicked

Possible duplicate of [How to get the children of the $(this) selector?](https://stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector) — Saeed, Apr 25 '18 at 06:40

score 1 · Answer 1 · answered Apr 25 '18 at 06:37

Use event.stopPropagation to stop the event from propagating to the parent divs:

$('div').click(function(e) {
  e.stopPropagation();
  console.log(this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOne">
  <div id="divTwo">
    <div id="divThree">
      <div id="divFour">
      test
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Apr 25 '18 at 06:38

You need to use event.stopPropagation(); to stop propagating to the parent element:

WORKING EXAMPLE

$(document).ready(function(){
  $('div').click(function(event){
    event.stopPropagation();
    console.log($(this).attr('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="divOne">
        <div id="divTwo">
            <div id="divThree">
                <div id="divFour">
                four
                </div>
            </div>
        </div>
    </div>
</body>

NOT WORKING EXAMPLE

$(document).ready(function(){
  $('div').click(function(event){
    console.log($(this).attr('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="divOne">
        <div id="divTwo">
            <div id="divThree">
                <div id="divFour">
                four
                </div>
            </div>
        </div>
    </div>
</body>

event.stopPropagation(); Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

score 0 · Accepted Answer · answered Apr 25 '18 at 06:38

0

use

console.log(event.target.id)

instead of

$(this).attr('id')

because this equals to element you bind on while event.target equals to the element triggered the event

answered Apr 25 '18 at 06:38

xianshenglu

4,943
3
17
34

score 0 · Answer 4 · answered Apr 25 '18 at 06:39

0

$("div").click(function(e) {
  console.log($(this).attr("id"));
  e.stopPropagation();
});

answered Apr 25 '18 at 06:39

Nurbol Sarsenbayev

227
4
6

Get the id of the child div alone using jquery

4 Answers4