Obtenir le type d'élément avec jQuery

308

Est-il possible, à l'aide de jQuery, de connaître le type d'un élément avec jQuery? Par exemple, l'élément est-il un div, une étendue, une sélection ou une entrée?

Par exemple, si j'essaie de charger des valeurs dans une liste déroulante avec jQuery, mais que le même script peut générer du code dans un ensemble de boutons radio, pourrais-je créer quelque chose comme:

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

Étant donné une liste déroulante avec un bouton à côté de lui avec la classe de déclenchement , ma elementTypevariable devrait revenir selectlorsque le bouton est pressé.

Jamie Hartnoll
la source
Pouvez-vous reformuler? qu'entendez-vous par type d'élément?
Abdul Munim
doublon possible de trouver le type d'un élément en utilisant jQuery
Felix Kling

Réponses:

558

Obtenir le type d'élément de la manière jQuery:

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

faire la même chose sans jQuery

var elementType = this.previousSibling.nodeName;

Vérification d'un type d'élément spécifique:

var is_element_input = $(this).prev().is("input"); //true or false
adeneo
la source
16
N'oubliez pas que la fonction .prop () n'a été ajoutée que dans jQuery 1.6 - vous devrez peut-être mettre à niveau la version que vous utilisez!
xgretsch
Ne fonctionnait pas avec l'ancien jQuery 1.3.2, donc mis à niveau vers le dernier et cela a bien fonctionné.
Damodar Bashyal
2
Cela pourrait être amélioré en changeant 'tagName' en 'nodeName' comme mentionné ici .
Kyle Stoflet
1
@KyleStoflet - il semble que vous ayez raison, nodeNameprend en charge plus de types d'éléments et la prise en charge d'IE5.5 ne devrait plus être un problème, donc je ne vois aucun problème avec le passage tagNameà nodeNamedans la réponse ci-dessus. Les deux fonctionneront très bien pour les éléments, et ce dernier fonctionnera également sur les nœuds de texte, les attributs, etc.
adeneo
3
Fonctionne mais je suis un peu confus par le prev (), qui est spécifique à l'exemple de code en question. Fondamentalement,$(this).is("input");
Fanky
56

vous pouvez également utiliser:

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

vous devez utiliser la tagNamepropriété et les attr('type')entrées

Distdev
la source
Un exemple renforcerait ce commentaire.
Justapigeon
16

Comme Distdev y a fait allusion, vous devez toujours différencier le type d'entrée. C'est-à-dire,

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

vous le dira input, mais cela ne fait pas de différence entre case à cocher / texte / radio. S'il s'agit d'une entrée, vous pouvez alors utiliser

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

pour vous dire case à cocher / texte / radio, afin que vous sachiez de quel type de contrôle il s'agit.

James Toomey
la source
9

vous pouvez utiliser .is():

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

voir la source

Mohammed Sufian
la source
3

utilisez get (0) .tagName. Voir ce lien

Amar
la source
3

Utilisez Nodename sur tagName:

nodeName contient toutes les fonctionnalités de tagName, plus quelques autres. Par conséquent, nodeName est toujours le meilleur choix.

voir DOM Core

Mike Rifgin
la source