Can jQuery provide the tag name?

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"?

You could try this:

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

See the docs for more on is().

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

should be

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

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

$('.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

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

Yes. You could use the below code:

this.tagName

Can jQuery provide the tag name?

Related

Recent Posts