jQuery: Obtenir de l'élément sélectionné nom de la balise

Est-il un moyen facile d'obtenir un nom de balise?

Par exemple, si je me suis donné $('a') dans une fonction, je veux obtenir 'a'.

InformationsquelleAutor configurator | 2011-03-18
  1. 971

    Vous pouvez appeler .prop("tagName"). Exemples:

    jQuery("<a>").prop("tagName"); //==> "A"
jQuery("<h1>").prop("tagName"); //==> "H1"
jQuery("<coolTagName999>").prop("tagName"); //==> "COOLTAGNAME999"


    Si l'écriture .prop("tagName") est fastidieux, vous pouvez créer une fonction personnalisée comme suit:

    jQuery.fn.tagName = function() {
  return this.prop("tagName");
};

    Exemples:

    jQuery("<a>").tagName(); //==> "A"
jQuery("<h1>").tagName(); //==> "H1"
jQuery("<coolTagName999>").tagName(); //==> "COOLTAGNAME999"


    Notez que les noms des balises sont, par convention, est revenu MAJUSCULE. Si vous voulez le retour de nom de balise être en minuscules, vous pouvez modifier la fonction personnalisée comme suit:

    jQuery.fn.tagNameLowerCase = function() {
  return this.prop("tagName").toLowerCase();
};

    Exemples:

    jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"
    • COMME de jQuery 1.6, cela devrait être .prop.
    • Est la capitalisation de la convention suivie par tous les navigateurs? Si non, jQuery normaliser cette?
    • tagName est une partie de la DOM spec et est toujours en majuscule.
    • Notez que la chaîne est retourné, c'est en LETTRES majuscules. Ça va être une chasse aux sorcières si vous tentez de le comparer à la "div" ou "un", par exemple.
    • à l'aide de toLowerCase() ou toUpperCase() peut être utile lors de la comparaison prop('tagName') suite à un nom de balise. if($("my_selector").prop("tagName").toLowerCase() == 'div') ou if($("my_selector").prop("tagName").toUpperCase() == 'DIV')
    • En réponse à @tilleryj de répondre, avec les majuscules doivent être camelCase avais. En tout cas, pour résumer: - DOM spec accessoires sont toujours camelCase - Le retour est en majuscules; utiliser .toLowerCase() pour comparer, par exemple 'div' ou 'select' - la Meilleure pratique est d'utiliser .prop('tag') comme jQuery empêche les erreurs JS
    • que les noms des balises sont, par convention, est revenu CAPITALISÉ" - non, ils sont retournés dans toutes les capitales. Capitalisation implique seulement la première lettre de la capitale, tandis que les autres lettres en minuscules.
    • quelqu'un peut-il me dire comment obtenir le nom de la balise à partir de la "<div class="connexion-header">" type. en fait, je suis en boucle à travers tout le contenu à l'intérieur du corps de la balise et j'ai besoin de tous les noms d'étiquette à l'intérieur, et il y a des id et des classes.
    • Je downvoted au lieu de upvoted par erreur et maintenant je ne peux pas le changer — désolé @tilleryj!

    InformationsquelleAutor tilleryj
  2. 94

    Vous pouvez utiliser le DOM est nodeName de la propriété:

    $(...)[0].nodeName
    • Merci. Fonctionne très bien - bien que je vais utiliser le plus jQueryish version parce que je suis dans un jQuery monde en ce moment.
    • pure JS solutions (comme celui-ci) sont généralement supérieurs à jQuery ceux surtout si elles ne souffrent pas de problèmes de compatibilité du navigateur problèmes ou sont beaucoup plus verbeux.
    • ... et précisément à cause de ces navigateurs problèmes d'incompatibilité, le jQuery sont souvent supérieure si quelqu'un est de choisir une solution et n'est pas bien versé dans ce navigateur-les incompatibilités de regarder dehors pour. 😉
    • Je considère que c'supérieure parce qu'elle n'a pas d'importance ce que la version jQuery est, cette solution fonctionne sur toutes les versions. +1
    • en particulier si vous êtes dans un de chaque()-comme situation, où vous avez à jeter de l'élément retour à l'objet jquery pour obtenir une propriété qui était déjà là, comme $(this).prop('tagname'). c'.nodeName est souvent plus efficace. +1
    InformationsquelleAutor SLaks
  3. 57

    De jQuery 1.6 vous devriez maintenant appeler prop:

    $target.prop("tagName")

    Voir http://api.jquery.com/prop/

    InformationsquelleAutor Rob
  4. 44

    jQuery 1.6+ 

    jQuery('selector').prop("tagName").toLowerCase()

    Les anciennes versions 

    jQuery('selector').attr("tagName").toLowerCase()

    toLowerCase() n'est pas obligatoire.

    • Pourquoi faites-vous new String?
    • Parce que toLowerCase() est une méthode de Chaîne
    • tagName est déjà une chaîne de caractères.
    InformationsquelleAutor Dayron Gallardo
  5. 22

    C'est encore une autre façon:

    $('selector')[0].tagName
    • Nice one! Plus claire que nodeName et encore plus courte. 😛
    InformationsquelleAutor Chepech
  6. 10

    Vous devriez PAS utilisation jQuery('selector').attr("tagName").toLowerCase(), car il ne fonctionne que dans les anciennes versions de Jquery.

    Vous pourrait utilisation $('selector').prop("tagName").toLowerCase() si vous êtes certain que vous utilisez une version de jQuery c'est >= la version 1.6.

    Remarque :

    Vous pouvez penser que tout le monde est à l'aide de jQuery 1.10+ ou quelque chose maintenant (janvier 2016), mais malheureusement, ce n'est pas vraiment le cas. Par exemple, beaucoup de gens aujourd'hui sont encore à l'aide de Drupal 7, et à chaque lancement officiel de Drupal 7 à ce jour inclut jQuery 1.4.4 par défaut.

    Donc, si ne sais pas si votre projet sera à l'aide de jQuery 1.6+, utilisez l'une des options qui fonctionnent pour TOUTES les versions de jQuery :

    Option 1 :

    jQuery('selector')[0].tagName.toLowerCase()

    Option 2 

    jQuery('selector')[0].nodeName.toLowerCase()
    InformationsquelleAutor John Slegers