Get Parent div id in jquery/javascript

Question

How can i get Parent Div id of component.

I have already referred this link but its not working.

jQuery get id of element by searching for it by class

Here Is my Sample Code.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            function linkClickEvent()
            {
                alert ($(this).parent().attr('id')); //Gives Me Undefined
                alert($(this).closest('div').attr('id')); //Gives Me Undefined
                alert($(this).parent().attr('id')); //Gives Me Undefined
            }
        </script>
    </head>
    <body>
        <div id="container_1">
            <a href="#" onclick="linkClickEvent();" id="link_1">Container_1</a>
        </div>
        <div id="container_2">
            <a href="#" onclick="linkClickEvent();" id="link_2">Container_2</a>
        </div>
        <div id="container_3">
            <a href="#" onclick="linkClickEvent();" id="link_3">Container_3</a>
        </div>
    </body>
</html>

score 7 · Accepted Answer · edited May 05 '15 at 07:39

7

Change your onclick event, in onclick event function linkClickEvent pass current element reference using this :

 <a href="#" onclick="linkClickEvent(this);" id="link_1">Container_1</a>

and in function add parameter to accept element reference:

function linkClickEvent (element) {
    console.log($(element).closest("div").attr("id"));
}

edited May 05 '15 at 07:39

royhowie

11,075
14
50
67

answered Jul 02 '14 at 10:44

Ehsan Sajjad

61,834
16
105
160

@Rush.2707 check your console of browser dev tools for errors – Ehsan Sajjad Oct 28 '15 at 10:45

score 4 · Answer 2 · answered Jul 02 '14 at 10:49

The issue is because you are using on* attributes to hook up your events, this refers to the window, not the clicked element. Use jQuery to hook up your events:

<div id="container_1">
    <a href="#" id="link_1">Container_1</a>
</div>
<div id="container_2">
    <a href="#" id="link_2">Container_2</a>
</div>
<div id="container_3">
    <a href="#" id="link_3">Container_3</a>
</div>

$('div a').click(function(e) {
    e.preventDefault();
    var parentId = $(this).closest('div').prop('id');
    alert(parentId);
});

Example fiddle

score 1 · Answer 3 · edited May 23 '17 at 12:26

You should do event handling in your JS files. Separating content, style and behaviour really is best practice.

You can get your element via:

$(document).on('click', '.element', function(){/*...*/});

And then save the id of the attribute clicked via:

var parent_id = $(this).parents('.classOfParent').attr('id');

or

var parent_id = $(this).parent().attr('id');

Also, if in doubt, check what "this" is with console.log() which works WAY better than alert().

Edit: Revised your question. Sorry, now it's correct.

PS: Why is console.log() considered better than alert()?

score 0 · Answer 4 · answered Jul 02 '14 at 10:45

0

Use event.preventDefault();

$("a").click(function(event) {
 event.preventDefault();
  $(this).parent().attr('id');
});

answered Jul 02 '14 at 10:45

Sudharsan S

15,336
3
31
49

score 0 · Answer 5 · answered Jul 02 '14 at 10:57

0

Use document.ready instead of onclick attribute.

 $(document).ready(function() {
            $('a').click(function() {
                var id = $(this).parent().attr('id');
                alert(id);
            });
        });

answered Jul 02 '14 at 10:57

Sharique

4,199
6
36
54

Get Parent div id in jquery/javascript

5 Answers5