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

Question

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

$.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

Вы можете добавить toLowerCase (), чтобы сделать его более согласованным (и XHTML-совместимым).

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

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

Answer 3

Зачем вообще создавать плагин? Кажется немного ненужным ...

alert( $('div')[0].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;
    }
};