Get element type with jQuery

Question

Is it possible, using jQuery, to find out the type of an element with jQuery? For example, is the element a div, span, select, or input?

For example, if I am trying to load values into a drop-down list with jQuery, but the same script can generate code into a set of radio buttons, could I create something like:

$('.trigger').live('click', function () {
   var elementType = $(this).prev().attr(WHAT IS IT);
});

Given a drop-down list with a button next to it with the trigger class, my elementType variable should return select upon the button being pressed.

possible duplicate of [How can I determine the element type of a matched element in jQuery?](http://stackoverflow.com/questions/341900/how-can-i-determine-the-element-type-of-a-matched-element-in-jquery) — Nathaniel Ford, Jun 06 '13 at 21:31
possible duplicate of [finding the type of an element using jQuery](http://stackoverflow.com/questions/608410/finding-the-type-of-an-element-using-jquery) — Felix Kling, Mar 15 '14 at 04:34

adeneo · Accepted Answer · 2015-07-29T17:43:00.423

630

Getting the element type the jQuery way:

var elementType = $(this).prev().prop('nodeName');

doing the same without jQuery

var elementType = this.previousSibling.nodeName;

Checking for specific element type:

var is_element_input = $(this).prev().is("input"); //true or false

edited Jul 29 '15 at 17:43

answered Dec 05 '11 at 16:57

adeneo

312,895
29
395
388

16

Just remember that the .prop() function was only added in jQuery 1.6 - you may need to upgrade the version you're using! – xgretsch Apr 17 '13 at 12:07
Didn't work with old jQuery 1.3.2, so upgraded to latest and it worked fine. – Damodar Bashyal May 09 '14 at 00:55
It's probably my version of jQuery, but only the last one worked for me. $(this).is("input") . Thanks for including multiple ways. – Flat Cat Sep 03 '14 at 22:59
how about 'jqueryElementObject'.tagName – Mushtaq Jameel Oct 15 '14 at 07:38
2

This could be improved by switching 'tagName' to 'nodeName' as mentioned [here](http://stackoverflow.com/questions/4878484/difference-between-tagname-and-nodename). – Kyle Stoflet Jul 29 '15 at 17:03
1

@KyleStoflet - it seems you're right, `nodeName` does support more types of elements, and supporting IE5.5 shouldn't be an issue any more, so I see no issues with changing `tagName` to `nodeName` in the above answer. Both will work just fine for elements, and the latter will work on textnodes, attributes etc. as well. – adeneo Jul 29 '15 at 17:42
3

Works but I got a bit confused by the prev(), which is specific for the example code in question. Basically, `$(this).is("input");` – Fanky Jan 09 '17 at 10:04
1

@Fanky - That's correct, the OP is specifically asking for the *previous* element, hence then `prev()` call. The rest of the answer is applicable to any other circumstance where one might need to know the type of tag or check the tagname etc. – adeneo Jan 09 '17 at 12:00

score 67 · Answer 2 · answered Jul 09 '13 at 08:20

67

also you can use:

$("#elementId").get(0).tagName

answered Jul 09 '13 at 08:20

Ali

6,808
3
37
47

score 25 · Answer 3 · answered Dec 05 '11 at 16:31

25

you should use tagName property and attr('type') for inputs

answered Dec 05 '11 at 16:31

Distdev

2,312
16
23

2

An example would make this comment stronger. – Justapigeon Dec 17 '19 at 03:55

score 20 · Answer 4 · answered Mar 04 '15 at 23:40

As Distdev alluded to, you still need to differentiate the input type. That is to say,

$(this).prev().prop('tagName');

will tell you input, but that doesn't differentiate between checkbox/text/radio. If it's an input, you can then use

$('#elementId').attr('type');

to tell you checkbox/text/radio, so you know what kind of control it is.

score 13 · Answer 5 · answered Oct 17 '16 at 07:52

13

you can use .is():

  $( "ul" ).click(function( event ) {
      var target = $( event.target );
      if ( target.is( "li" ) ) {
         target.css( "background-color", "red" );
      }
  });

see source

answered Oct 17 '16 at 07:52

Mohammed Sufian

1,743
6
35
62

score 4 · Answer 6 · answered Jan 31 '14 at 11:38

4

use get(0).tagName. See this link

answered Jan 31 '14 at 11:38

Amar

421
1
6
17

score 3 · Answer 7 · edited Sep 12 '14 at 13:14

3

Use Nodename over tagName :

nodeName contains all functionalities of tagName, plus a few more. Therefore nodeName is always the better choice.

see DOM Core

edited Sep 12 '14 at 13:14

coder

10,460
17
72
125

answered Jul 03 '14 at 09:21

Mike Rifgin

10,409
21
75
111

Get element type with jQuery

7 Answers7

Linked

Related