Jak rozszerzyć jQuery, aby łatwiej było odzyskać tagName

Question

Szukam rozszerzenia jQuery, aby móc łatwo pobrać tagName pierwszego elementu w obiekcie jQuery. Oto, co wymyśliłem, ale to nie działa:

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

Jakieś pomysły, co jest nie tak?

BTW, zamierzam użyć tego bardziej do testowania niż do produkcji.

Answer 1

Spróbuj to zamiast:

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

Aby wyjaśnić nieco więcej, dlaczego oryginalny przykład nie działa, metoda each() zawsze zwróci oryginalnego obiektu jQuery (chyba, że ​​sam obiekt jQuery został zmodyfikowany) . Aby zobaczyć, co dzieje się w każdym z kodem, tu jest jakiś pseudokod, który pokazuje w jaki sposób each() działa:

To nie jest jak each() naprawdę zostaje wdrożony (przez długie ujęcie prawdopodobnie), ale to jest pokaż, że zwracana wartość funkcji action() jest ignorowana.

Answer 2

Po co tworzyć wtyczkę? Wydaje się nieco zbędny ...

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

Answer 3

Możesz chcieć dodać toLowerCase(), aby uczynić go bardziej spójne (i XHTML).

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

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

Answer 4

Ten zwróci małą literę dopasowanego elementu.

np

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

powróci div (zakładając, że ten element był dz).

Po przekazaniu kolekcji elementów zwraca ona tablicę wszystkich zmiennych, w których każdy wpis tablicy odpowiada dopasowanemu elementowi.

na przykład jeśli prowadzimy

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

na poniższym (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> 

będzie tablicą zmiennych:

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

Jest to funkcja - to zasadniczo tak samo jak powyżej, ale obsługuje wiele elementów, które mogą, ale nie muszą być przydatne dla twojego projektu.

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