如何扩展 jQuery 以更轻松地检索 tagName答案

【问题标题】：How to extend jQuery to make it easier to retrieve the tagName如何扩展 jQuery 以更轻松地检索 tagName
【发布时间】：2010-09-29 12:40:17
【问题描述】：

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

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

有什么想法吗？

顺便说一句，我希望将其更多地用于测试而不是生产。

【问题讨论】：

为什么不直接使用 .attr('tagName')
redsquare，tagName 不是属性！

标签： javascript jquery

【解决方案1】：

试试这个：

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

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

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

这不是each() 真正实现的方式（可能是远景），而是表明您的action() 函数的返回值被忽略了。

【讨论】：

将标签转换为小写可能是个好主意。返回 this.get(0).tagName.toLowerCase()

【解决方案2】：

为什么要创建插件？好像有点没必要……

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

【讨论】：

【解决方案3】：

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

$.fn.tagName = function() {
    return this.get(0).tagName.toLowerCase();
}

alert($('#testElement').tagName());

【讨论】：

【解决方案4】：

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

例如，

jQuery("#test_div").tagName();

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

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

例如，如果我们运行

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

在以下 (X)HTML 上：

<div>
<p class="classname">test text</p>
<div class="anotherClass">
    <ul>
        <li class="classname"><a href="test">Test link</a></li>
    </ul>
    <p class="classname">Some more text</p>
</div>
<div>

标记名数组：

["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;
    }
};

【讨论】：

可能返回一个数组或一个项目...如果所选项目之一没有标签名...将抛出异常...