734 votes

jQuery hasAttr vérifie s'il y a un attribut sur un élément

Comment vérifier la présence d'un attribut sur un élément en jQuery ? Similaire à hasClass mais avec attr ?

Par exemple,

if ($(this).hasAttr("name")) {
    // ...
}

0 votes

Voici un plugin jQuery qui semble faire exactement ce que vous recherchez -> plugins.jquery.com/projet/hasAttr

3 votes

Bmarti44 On dirait que le lien a pourri un peu.

0 votes

stackoverflow.com/questions/1318076/ voici une meilleure réponse.

1144voto

strager Points 41713
var attr = $(this).attr('name');

// For some browsers, `attr` is undefined; for others,
// `attr` is false.  Check for both.
if (typeof attr !== 'undefined' && attr !== false) {
    // ...
}

0 votes

Ahah, merci. C'est la bonne réponse pour moi car retourner undefined n'est pas ce que je veux. Merci encore.

26 votes

Il serait probablement préférable de faire quelque chose comme : if( typeof( $(this).attr('name') )= 'undefined' ) { // ... } puisque undefined peut en fait être redéfini en utilisant un simple : undefined = 1

0 votes

Shane Tomlinson. Oui, je suis au courant. maintenant . Ce message a été publié il y a plus d'un an, alors que je ne connaissais pas la plupart des particularités de JavaScript. Néanmoins, j'ai mis à jour ma réponse ; merci.

651voto

Domenic Points 40761

Que diriez-vous de juste $(this).is("[name]") ?

Le site [attr] est le sélecteur CSS pour un élément avec un attribut attr et .is() vérifie si l'élément sur lequel il est appelé correspond au sélecteur CSS donné.

7 votes

Et si vous vouliez juste sélectionner tous les éléments avec un attribut de nom en premier lieu, il suffit de faire $('[name]')

0 votes

Pour ceux qui souhaitent vérifier les classes sous SVG DOM en utilisant JQuery, cela peut être une alternative.

6 votes

Note : avec ce sélecteur, il ne fonctionnera pas : [camelizedAttr]

152voto

karim79 Points 178055

Si vous êtes amené à vérifier fréquemment l'existence d'attributs, je vous suggère de créer un fichier de type hasAttr pour l'utiliser comme vous l'avez supposé dans votre question :

$.fn.hasAttr = function(name) {  
   return this.attr(name) !== undefined;
};

$(document).ready(function() {
    if($('.edit').hasAttr('id')) {
        alert('true');
    } else {
        alert('false');
    }
});

<div class="edit" id="div_1">Test field</div>

3 votes

@TreeUK - il ne s'agit pas d'une faute de frappe, !== est ce que je voulais dire.

2 votes

Cool, je n'avais pas vu ça avant :) [!== n'est pas exactement égal à (valeur et type)]

1 votes

"undefined" n'est pas un mot clé en javascript (voir constc.blogspot.com/2008/07/ ). La solution la plus simple consiste à ajouter "var undefined ;" à la première ligne de votre fonction hasAttr().

110voto

Tu es si proche que c'est fou.

if($(this).attr("name"))

Il n'y a pas de hasAttr, mais le fait de frapper un attribut par son nom renverra simplement undefined s'il n'existe pas.

C'est pourquoi l'exemple ci-dessous fonctionne. Si vous supprimez l'attribut name de #heading, la deuxième alerte se déclenchera.

Mise à jour : Selon les commentaires, les éléments suivants seront UNIQUEMENT fonctionne si l'attribut est présent ET n'a pas de valeur si l'attribut est présent mais vide.

<script type="text/javascript">
$(document).ready(function()
{
    if ($("#heading").attr("name"))
      alert('Look, this is showing because it\'s not undefined');
    else
      alert('This would be called if it were undefined or is there but empty');
});
</script>
<h1 id="heading" name="bob">Welcome!</h1>

1 votes

Le comportement est cependant le même dans les deux cas. Vous pouvez échanger une évaluation de false avec undefined dans l'exemple que je montre ici. .attr("name") ne renvoie pas false, mais son évaluation est false. Vous pouvez donc l'utiliser exactement de la même manière que ci-dessus.

23 votes

Si le nom attr est présent mais que la chaîne est vide, l'attribut existe mais le test échoue.

8 votes

La question était de savoir si l'attribut était présent, et non ce qu'il fallait faire s'il était vide.

85voto

Domenic Points 40761

En retard à la fête, mais... pourquoi ne pas simplement this.hasAttribute("name") ?

Consultez le site Ce site

0 votes

Bonne réponse si vous n'avez pas besoin de l'objet jquery.

17 votes

Ou si vous ne vous souciez pas du fait qu'il ne fonctionnera pas dans de nombreux navigateurs plus anciens et dans IE.

9 votes

@baiano IE6&7 sont les seuls à ne pas le supporter, il est bon de le mentionner maintenant car IE8 est à peu près tout ce qui reste.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X