Cómo extender jQuery para que sea más fácil recuperar el tagName

Question

Estoy buscando extender jQuery para que pueda recuperar fácilmente el tagName del primer elemento en un objeto jQuery. Esto es lo que he llegado con, pero no parece funcionar:

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

Alguna idea de lo que está mal?

Por cierto, estoy buscando usar esto más para probar que en producción.

Answer 1

Tal vez puedas probar:

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

Para explicar un poco más de por qué su ejemplo original no funciona, el método each() siempre devolverá el objeto original jQuery (a menos que el propio objeto jQuery se modificó) . Para ver lo que está sucediendo en cada uno con su código, he aquí algo de pseudocódigo que muestra cómo el método each() funciona:

Esto no es como each() realmente se pone en práctica (por asomo probablemente), pero se ha de mostrar que se ignora el valor de retorno de su función action().

Answer 2

¿Por qué crear un plugin en absoluto? Parece un poco innecesario ...

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

Answer 3

Es posible que desee añadir un toLowerCase() para que sea más consistente (y compatible con XHTML).

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

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

Answer 4

Este devolverá el nombre de etiqueta minúscula del elemento coincidente.

por ejemplo,

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

volvería div (suponiendo que el elemento era un div).

Si pasa una colección de elementos, devuelve una matriz de todos los nombres de etiquetas, donde cada entrada de matriz corresponde al elemento coincidente.

por ejemplo, si corremos

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

en el siguiente (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> 

haría una serie de identificadores:

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

Ésta es la función - es básicamente lo mismo que arriba, pero admite múltiples elementos, que pueden o no ser útiles para su proyecto.

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