How Can I Easily Get the Tag Name of a Selected Element Using jQuery?

Retrieving the Tag Name of a Selected Element with jQuery

Seeking an effortless approach to obtaining the tag name of a given element within a jQuery selector? This guide provides comprehensive guidance on employing the .prop("tagName") method to swiftly capture tag names.

Solution via .prop("tagName"):

To determine the tag name of a given jQuery object $('selector'), simply utilize the .prop("tagName") function. For instance:

jQuery("a").prop("tagName"); // Outputs "A"
jQuery("h1").prop("tagName"); // Outputs "H1"
jQuery("<coolTagName999>").prop("tagName"); // Outputs "COOLTAGNAME999"

Custom Function for Simplification:

To streamline the process, a custom function can be defined:

jQuery.fn.tagName = function() {
  return this.prop("tagName");
};

This simplifies the syntax, allowing for easy retrieval of tag names:

jQuery("a").tagName(); // Outputs "A"
jQuery("h1").tagName(); // Outputs "H1"
jQuery("<coolTagName999>").tagName(); // Outputs "COOLTAGNAME999"

Lowercase Tag Name Support:

By convention, tag names are returned in uppercase. To retrieve lowercase tag names, modify the custom function:

jQuery.fn.tagNameLowerCase = function() {
  return this.prop("tagName").toLowerCase();
};

This function will output lowercase tag names:

jQuery("a").tagNameLowerCase(); // Outputs "a"
jQuery("h1").tagNameLowerCase(); // Outputs "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); // Outputs "cooltagname999"

The above is the detailed content of How Can I Easily Get the Tag Name of a Selected Element Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!