如何扩展jQuery以便更容易检索tagName

我希望扩展jQuery，以便我可以轻松地检索jQuery对象中第一个元素的tagName。 这就是我想出来的，但它似乎不起作用：

$.fn.tagName = function() { return this.each(function() { return this.tagName; }); } alert($('#testElement').tagName()); 

有什么想法有什么不对吗？

顺便说一下，我想把它用于测试而不是生产。

Answer 1

试试这个：

 $.fn.tagName = function() { return this.get(0).tagName; } alert($('#https://stackoverflow.com/questions/411688/how-to-extend-jquery-to-make-it-easier-to-retrieve-the-tagname/testElement').tagName()); 

为了解释为什么原始示例不起作用， each()方法将始终返回原始jQuery对象（除非jQuery对象本身被修改）。 要查看每个代码中发生的情况，下面是一些伪代码，它显示了each()方法的工作原理：

 function each(action) { for(var e in jQueryElements) { action(); } return jQueryObject; } 

这不是each()真正实现的方式（可能是长镜头），但它是为了表明你的action()函数的返回值被忽略。

Answer 2

为什么要创建一个插件？ 似乎有点不必要……

 alert( $('div')[0].tagName ); 

Answer 3

您可能希望添加toLowerCase（）以使其更加一致（并且符合XHTML）。

 $.fn.tagName = function() { return this.get(0).tagName.toLowerCase(); } alert($('#https://stackoverflow.com/questions/411688/how-to-extend-jquery-to-make-it-easier-to-retrieve-the-tagname/testElement').tagName()); 

Answer 4

这个将返回匹配元素的小写标记名。

例如，

 jQuery("#https://stackoverflow.com/questions/411688/how-to-extend-jquery-to-make-it-easier-to-retrieve-the-tagname/test_div").tagName(); 

会返回div （假设该元素是div）。

如果传递元素集合，则返回所有标记名的数组，其中每个数组条目对应于匹配的元素。

例如，如果我们跑

 jQuery(".classname").tagName(); 

在以下（X）HTML上：

 
 
https://stackoverflow.com/questions/411688/how-to-extend-jquery-to-make-it-easier-to-retrieve-the-tagname/test text
 
 
 
Test link
 
 
Some more text
 
 
 

会有一组标记名：

 ["p", "li", "p"] 

这是函数 – 它与上面基本相同，但它支持多个元素，这些元素可能对您的项目有用，也可能没用。

 jQuery.fn.tagName = function(){ if(1 === this.length){ return this[0].tagName.toLowerCase(); } else{ var tagNames = []; this.each(function(i, el){ tagNames[i] = el.tagName.toLowerCase(); }); return tagNames; } };