Can jQuery provide the tag name?

Question

I've got several elements on a HTML page which have the same class - but they're different element types. I want to find out the tag name of the element as I loop over them - but .attr doesn't take "tag" or "tagname".

Here's what I mean. Consider these elements on a page:

<h1 class="rnd">First</h1>
<h2 id="foo" class="rnd">Second</h2>
<h3 class="rnd">Third</h3>
<h4 id="bar" class="rnd">Fourth</h4>

Now I want to run something like this to ensure that my elements all have an id if one wasn't already defined:

$(function() {
  $(".rnd").each(function(i) {
    var id = $(this).attr("id");
    if (id === undefined || id.length === 0) {
      // this is the line that's giving me problems.
      // .attr("tag") returns undefined
      $(this).attr("id", "rnd" + $(this).attr("tag") + "_" + i.toString());
    }
  });
});

The result I would like would be that the H2 and H4 elements would then have an id of

rndh2_1
rndh4_3

respectively.

Any ideas on how I can discover the tag name of the element represented by "this"?

Maybe answer is here: http://stackoverflow.com/a/8355251/271103 — Hakan KOSE, Jul 26 '12 at 11:54

score 167 · Answer 1 · answered Oct 07 '09 at 15:27

167

You could try this:

if($(this).is('h1')){
  doStuff();
}

See the docs for more on is().

answered Oct 07 '09 at 15:27

middus

9,103
1
31
33

12

To whom it may concern: if you downvote my answer, please tell me why so I can improve it and learn for future SO-answers. Thanks. – middus Feb 13 '11 at 21:25
3

I hate it too. Anyway I upvoted because `nodeName` returns a string that, depending browser, is upper cased or not. – Marcel Falliere Apr 14 '11 at 19:49
2

Assume the following: You don't just have a small selection of possible tags, but it could be any of 100+ html tags. Then you'd need to write: $(this).is('sometag') a 100+ times. I assume this is why some people downvoted your answer. – ximi Mar 01 '12 at 20:09
Wow...never seen `is('*')` in years. It probably won't answer the OP but it worked for me, thanks, @middus! – Alastair May 21 '13 at 02:13

Wabbitseason · Accepted Answer · 2011-06-06T17:10:23.677

110

$(this).attr("id", "rnd" + $(this).attr("tag") + "_" + i.toString());

should be

$(this).attr("id", "rnd" + this.nodeName.toLowerCase() + "_" + i.toString());

edited Jun 06 '11 at 17:10

answered Oct 07 '09 at 15:25

Wabbitseason

5,641
9
49
60

18

You'll need to use this.nodeName.toLowerCase(), as most DOM representations of HTML documents automatically uppercase the nodeName. – NickFitz Oct 07 '09 at 15:27
both this.nodeName and this.tagName seem to work for me. Thanks all! – BigPigVT Oct 07 '09 at 15:50
5

+1 for mentioning nodeName. Sometimes, jQuery is one step too far :-) – Serge Wautier Jul 05 '11 at 09:46
2

+1 jQuery is() doesn't do the job because in the case of h1, h2, etc there are 6 different cases you have to handle if using is(). – Konstantin Dinev Nov 19 '12 at 09:51

score 53 · Answer 3 · edited May 17 '11 at 16:41

53

Since I've hit this question once before and it didn't help me in my case (I didn't have a this, but instead had a jQuery selector instance). Calling get() will get you the HTML element, by which you can get the nodeName as mentioned above.

this.nodeName; // In a event handler, 'this' is usually the element the event is called on

or

$('.hello:first-child').get(0).nodeName; // Use 'get' or simply access the jQuery Object like an array
$('.hello:first-child')[0].nodeName;     // will get you the original DOM element object

edited May 17 '11 at 16:41

Yi Jiang

49,435
16
136
136

answered Nov 17 '10 at 01:23

Scott Kirkwood

1,135
12
15

1

first helpful one on the page – Rooster Jul 19 '12 at 19:57

score 46 · Answer 4 · edited May 03 '12 at 17:30

46

You could also use $(this).prop('tagName'); if you're using jQuery 1.6 or higher.

edited May 03 '12 at 17:30

Yahel

37,023
22
103
153

answered May 11 '11 at 07:23

Bijay Rungta

990
9
16

This is exactly what I needed. In my design, I had the jquery element handy, but not the original HTML DOM element. This works for me. – Gilthans May 12 '12 at 19:56
I think this is the exact answer that answers the subject of this question. – CodeTweetie Mar 08 '13 at 11:56

score 4 · Answer 5 · edited Jul 11 '14 at 17:41

4

Yes. You could use the below code:

this.tagName

edited Jul 11 '14 at 17:41

felipe.zkn

2,012
7
31
63

answered Oct 07 '09 at 15:39

fernando

169
3

score 1 · Answer 6 · edited Sep 13 '11 at 12:57

1

I think you cannot use the nodeName in jQuery since nodeName is a DOM property and jQuery itself do not have a either a nodeName function or property. But based on the respondent who first mentioned about this nodeName stuff, this is how I was able to resolve the problem:

this.attr("id", "rnd" + this.attr("nodeName") + "_" + i.toString());

NOTE: this here is a jQuery object.

edited Sep 13 '11 at 12:57

pimvdb

151,816
78
307
352

answered Sep 13 '11 at 10:20

Abet

123
1
5

score 0 · Answer 7 · answered Feb 02 '13 at 07:31

0

You can get html element tag name on whole page.

You could use:

        $('body').contents().on("click",function () {
          var string = this.tagName;
          alert(string);
         });

answered Feb 02 '13 at 07:31

user2029521

1

score 0 · Answer 8 · answered Feb 11 '13 at 11:01

0

you can try:
jQuery(this).get(0).tagName;
or
jQuery(this).get(0).nodeName;

note: replace this with your selector (h1, h3 or ...)

answered Feb 11 '13 at 11:01

Akabr Amani

13
6

Chris S. · Answer 9 · 2013-05-24T16:54:57.263

0

I only just wrote it for another issue and thought it may help either of you as well.

Usage:

i.e. onclick="_DOM_Trackr(this);"

Parameters:

DOM-Object to trace
return/alert switch (optional, default=alert)

Source-Code:

function _DOM_Trackr(_elem,retn=false)
{
    var pathTrackr='';
    var $self=$(_elem).get(0);
    while($self && $self.tagName)
    {
        var $id=($($self).attr("id"))?('#'+$($self).attr("id")):'';
        var $nName=$self.tagName;
        pathTrackr=($nName.toLowerCase())+$id+((pathTrackr=='')?'':' > '+(pathTrackr));
        $self=$($self).parent().get(0);
    }
    if (retn)
    {
        return pathTrackr;
    }
    else
    {
        alert(pathTrackr);
    }
}

edited May 24 '13 at 16:54

answered May 24 '13 at 16:49

Chris S.

1,199
11
25

Example Output: `html > body > div#coreApp > div#productpage > div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input` – Chris S. May 24 '13 at 16:57
**Another usage example:** `$('*').each(function(_i,_e){$(_e).attr('title',_DOM_Trackr(_e,true));});` – Chris S. May 24 '13 at 17:10

score 0 · Answer 10 · answered Jan 20 '16 at 23:08

0

The best way to fix your problem, is to replace $(this).attr("tag") with either this.nodeName.toLowerCase() or this.tagName.toLowerCase().

Both produce the exact same result!

answered Jan 20 '16 at 23:08

John Slegers

45,213
22
199
169

score 0 · Answer 11 · answered Jun 17 '17 at 10:20

Instead simply do:

$(function() {
  $(".rnd").each(function(i) {
    var id = $(this).attr("id");
    if (id === undefined || id.length === 0) {
      // this is the line that's giving me problems.
      // .attr("tag") returns undefined
      // change the below line...
      $(this).attr("id", "rnd" + this.tagName.toLowerCase() + "_" + i.toString()); 
  });
});

score 0 · Answer 12 · answered Oct 20 '11 at 17:27

Since this is a question you come along on google using jquery tagname first child as a query I'll post another example:

<div><p>Some text, whatever</p></div>

$('div').children(':first-child').get(0).tagName); // ...and not $('div:first-child')[...]

The jquery result is an (uppercase) tagname: P

Francesco Casula · Answer 13 · 2016-02-27T09:22:22.840

0

Consider the fast FILTER method:

$('.rnd').filter('h2,h4')

returns:

[<h2 id="foo" class="rnd">Second</h2>, <h4 id="bar" class="rnd">Fourth</h4>]

so:

$('.rnd').filter('h2,h4').each(function() { /*...$(this)...*/ });

edited Feb 27 '16 at 09:22

answered Feb 23 '12 at 16:15

Francesco Casula

26,184
15
132
131

Can jQuery provide the tag name?

13 Answers13

Linked

Related