Get child tagname of an element

Question

I want to get the child tag name of an element.

HTML:

<div class="element">
    <h1>title</h1>
</div>
<div class="element">
    <img src="http://2.bp.blogspot.com/-ma66w8WJsZ0/UBVcmt3XS4I/AAAAAAAAAWw/4UyVd2eR8A0/s1600/olympic-logo.thumbnail.jpg" />
</div>
<div id="debugger"></div>

jQuery:

$(".element").bind("click", function(){

    var child = $(this).add("first-child").prop("tagName");

    $("#debugger").html(child);

});

I don't understand why I'm always getting DIV as the result...

Thank you.

http://jsfiddle.net/8Xg3G/2/

possible duplicate of [Can jQuery provide the tag name?](http://stackoverflow.com/questions/1532331/can-jquery-provide-the-tag-name) — Mild Fuzz, Aug 16 '12 at 12:54

thecodeparadox · Accepted Answer · 2012-08-16T13:25:22.633

11

$(this).children()[0].tagName

OR

$(this).children().first().prop('tagName');

.add() used for add new element to jQuery object array, but you're trying to get an existing element's tag name. So, you need some getter method.

With JavaScript

this.firstChild.tagName

OR

this.childNodes[0].tagName

Full Code

$(".element").bind("click", function(){
    var child = $(this).children().first().prop('tagName');
    $("#debugger").html(child);
});

DEMO

edited Aug 16 '12 at 13:25

answered Aug 16 '12 at 12:55

thecodeparadox

86,271
21
138
164

1

if you're going to use array notation to get the raw DOM element, isn't `.first()` redundant? – jackwanders Aug 16 '12 at 12:56
@jackwanders `1+1=2` is same for everyone. Thanks mate. – thecodeparadox Aug 16 '12 at 13:19
1

For older jQuery versions, use `.attr('tagName')` instead of `.prop('tagName')` – Meetai.com Mar 11 '15 at 08:21

score 4 · Answer 2 · answered Aug 16 '12 at 12:55

.add will add an element to the current jQuery collection, in this case, $(this). $(this) contains the div, and when you run .prop('tagName'), jQuery returns the tag name of the first element in the collection, so you get "div" as a result.

Try .children instead:

var child = $(this).children().eq(0).prop("tagName");

score 3 · Answer 3 · answered Aug 16 '12 at 12:56

3

Try:

var child = $(this).children(":first");

This will get the first child of this.

Pretty sure .prop('tagName') only works in jQuery 1.6+.

answered Aug 16 '12 at 12:56

Flash

15,945
13
70
98

Ram · Answer 4 · 2012-08-16T13:02:40.693

1

You can use the target property of the event object, try the following:

$(".element").bind("click", function(event){
    var target = event.target.localName; // or event.target.tagName;
    $("#debugger").html(target);
});

Fiddle

edited Aug 16 '12 at 13:02

answered Aug 16 '12 at 12:56

Ram

143,282
16
168
197

Get child tagname of an element

4 Answers4