Как расширить jQuery, чтобы упростить получение tagName

Я хочу расширить jQuery, чтобы я мог легко получить tagName первого элемента в объекте jQuery. Это то, что я придумал, но он не работает:

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

Любые идеи, что неправильно?

Кстати, я хочу использовать это больше для тестирования, чем в производстве.

Ответ 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() игнорируется.

Ответ 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;
    }
};