Obtenga el tipo de elemento con jQuery

308

¿Es posible, usando jQuery, averiguar el tipo de elemento con jQuery? Por ejemplo, ¿es el elemento un div, span, select o input?

Por ejemplo, si intento cargar valores en una lista desplegable con jQuery, pero el mismo script puede generar código en un conjunto de botones de radio, ¿podría crear algo como:

$('.trigger').live('click', function () {
   var elementType = $(this).prev().attr(WHAT IS IT);
});

Dada una lista desplegable con un botón al lado con la clase de disparo , mi elementTypevariable debería volver selectal presionar el botón.

Jamie Hartnoll
fuente
¿Puedes reformular? ¿Qué quieres decir con tipo de elemento?
Abdul Munim
posible duplicado de encontrar el tipo de elemento usando jQuery
Felix Kling

Respuestas:

558

Obteniendo el elemento escriba la forma jQuery:

var elementType = $(this).prev().prop('nodeName');

haciendo lo mismo sin jQuery

var elementType = this.previousSibling.nodeName;

Comprobando el tipo de elemento específico:

var is_element_input = $(this).prev().is("input"); //true or false
adeneo
fuente
16
Solo recuerde que la función .prop () solo se agregó en jQuery 1.6, ¡es posible que deba actualizar la versión que está utilizando!
xgretsch
No funcionaba con el antiguo jQuery 1.3.2, así que lo actualicé al último y funcionó bien.
Damodar Bashyal
2
Esto podría mejorarse cambiando 'tagName' a 'nodeName' como se menciona aquí .
Kyle Stoflet
1
@KyleStoflet: parece que tienes razón, nodeNameadmite más tipos de elementos y admitir IE5.5 ya no debería ser un problema, por lo que no veo problemas tagNamepara cambiar nodeNameen la respuesta anterior. Ambos funcionarán bien para los elementos, y el último también funcionará en nodos de texto, atributos, etc.
adeneo
3
Funciona pero me confunde un poco el prev (), que es específico para el código de ejemplo en cuestión. Básicamente,$(this).is("input");
Fanky
56

también puedes usar:

$("#elementId").get(0).tagName
Ali
fuente
26

debe usar tagNamepropiedad y attr('type')para entradas

Distdev
fuente
Un ejemplo haría este comentario más fuerte.
Justapigeon
16

Como aludió Distdev, aún necesita diferenciar el tipo de entrada. Es decir,

$(this).prev().prop('tagName');

le dirá input, pero eso no diferencia entre casilla de verificación / texto / radio. Si es una entrada, puede usar

$('#elementId').attr('type');

para decirle casilla de verificación / texto / radio, para que sepa qué tipo de control es.

James Toomey
fuente
9

puedes usar .is():

  $( "ul" ).click(function( event ) {
      var target = $( event.target );
      if ( target.is( "li" ) ) {
         target.css( "background-color", "red" );
      }
  });

ver fuente

Mohammed Sufian
fuente
3

Utilice Nodename sobre tagName:

nodeName contiene todas las funcionalidades de tagName, además de algunas más. Por lo tanto, nodeName es siempre la mejor opción.

ver DOM Core

Mike Rifgin
fuente