Question

我希望扩展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($('#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($('#testElement').tagName());

Answer 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;
    }
};

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

4 个答案: