How to get the type of an element. JavaScript / jQuery

Question

Right, idiot moment coming up. I've done a search, but can't find the right solution.

I've got a jQuery selector selecting a class, maybe an ID, in fact it could be anything, this selector is fed into a function I'm programming.

I need to be able to figure out the type of each matched element, for example:

<div class="target"></div>

Would return div, and

<input class="target" />

Would return input, simple right?

Well you'd have thought so, but I cannot seem to find the solution.

Any help would be greatly appreciated :-)

Andy E · Accepted Answer · 2010-07-13 08:56:15Z

4

You need to get the underlying DOM element and access the tagName property. For example,

alert($("#target").get(0).tagName);
// -> DIV

Be aware that browsers will return the tag name in uppercase, so something like this would cause you a bit of grief:

if ($("#target").get(0).tagName == "div") { alert("DIV!"); }

answered Jul 13, 2010 at 8:56

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Everard Over a year ago

That's the one, I was trying to use tagName directly on the selector, without using .get(0). Thank you very much! :D

Sachin R · Accepted Answer · 2010-07-13 08:59:14Z

1

$.fn.tagName = function() {
    return this.get(0).tagName;
}
alert($('#testElement').tagName());

To explain a little bit more of why your original example didn't work, the each() method will always return the original jQuery object (unless the jQuery object itself was modified). To see what is happening in each with your code, here is some pseudocode that shows how the each() method works:

function each(action) {
    for(var e in jQueryElements) {
        action();
    }
    return jQueryObject;
}

This is not how each() really gets implemented (by a long shot probably), but it is to show that the return value of your action() function is ignored.

answered Jul 13, 2010 at 8:59

Sachin R

11.9k11 gold badges37 silver badges42 bronze badges

Comments

jim tollan · Accepted Answer · 2010-07-13 08:57:19Z

0

try:

$("yourelement").is("input")

or:

if ($(this).is('input:checkbox'))

etc.... where appropriate

answered Jul 13, 2010 at 8:57

jim tollan

22.5k4 gold badges53 silver badges64 bronze badges

2 Comments

Ben Everard Over a year ago

Thanks for your answer, I'd prefer to get the element type back as the others have shown, and run it through a condition from there :-)

jim tollan Over a year ago

no worries - just another of the many ways to skin the jquery cat :)

Collectives™ on Stack Overflow

How to get the type of an element. JavaScript / jQuery

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related