How Can I Retrieve the Tag Name of a jQuery Element?

Retrieving Tag Names with jQuery

Querying elements in jQuery provides access to various attributes, including the tag name. This guide explores effective methods for obtaining the tag name of a given selected element.

Obtaining Tag Names

The .prop() method allows you to retrieve the tag name using .prop("tagName"). Here are some examples:

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

For convenience, you can create a custom function as follows:

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

This allows you to use:

jQuery("<a>").tagName(); // Returns "A"
jQuery("<h1>").tagName(); // Returns "H1"
jQuery("<cooltagname999>").tagName(); // Returns "COOLTAGNAME999"</cooltagname999>
</h1></a>

Note that tag names are typically returned in uppercase. If you prefer lowercase names, you can modify the custom function:

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

Examples with lowered tag names:

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

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