Sélectionner des éléments par attribut


253

J'ai une collection de cases à cocher avec des identifiants générés et certains d'entre eux ont un attribut supplémentaire. Est-il possible d'utiliser JQuery pour vérifier si un élément a un attribut spécifique? Par exemple, puis-je vérifier si l'élément suivant a l'attribut "myattr"? La valeur de l'attribut peut varier.

<input type="checkbox" id="A" myattr="val_attr">A</input>

Par exemple, comment puis-je obtenir une collection de toutes les cases à cocher qui ont cet attribut sans vérifier une par une? Est-ce possible?


2
En passant, un <input /> est une balise vide qui n'est pas destinée à contenir du contenu. Peut-être que vous n'êtes pas concernés par la validation car vous présente myatttr ...
SCOTTÉ


Si vous avez déjà une collection et que vous souhaitez filtrer uniquement les éléments avec un attribut spécifique - faites-le -$filtered = $collection.filter('[attribute_name]');
jave.web

Réponses:


190

Voulez-vous dire pouvez-vous les sélectionner? Si oui, alors oui:

$(":checkbox[myattr]")

4
Notez que si vous testez l'existence (probablement dans une instruction if, par exemple), il est probablement plus correct / fiable de le faire: if ($ (": checkbox [myattr]"). Length ()> 0) ...
rinogo

14
@rinogo: en fait, tout ce dont vous avez besoin est if ($ (": checkbox [myattr]"). length). Le () après la longueur n'est pas nécessaire, pas plus que le> 0, 0 n'est évalué à faux dans les tests d'égalité qui ne nécessitent pas d'égalité stricte (à la fois la valeur et le type).
bmarti44

1
Il génère des erreurs js si vous essayez quelque chose comme: td [myattr]. Je pense donc que cette fonctionnalité visait spécifiquement les cases à cocher.
fooledbyprimes

6
Le deux-points sélectionne des pseudo-classes, déterminées par le type attr. Pour appliquer la même chose aux td, omettez simplement les deux points.
dhochee

Ou si vous vouliez voir si quelque chose n'avait pas d'attribut, comme trouver tous les liens qui n'ont pas d' hrefattribut. $("#myBox").find('a').filter(':not([href])')
timbrown

368
if ($('#A').attr('myattr')) {
    // attribute exists
} else {
    // attribute does not exist
}

ÉDITER:

Ce qui précède tombera dans le else-branch lorsqu'il myattrexiste mais est une chaîne vide ou "0". Si c'est un problème, vous devez explicitement tester sur undefined:

if ($('#A').attr('myattr') !== undefined) {
    // attribute exists
} else {
    // attribute does not exist
}

3
Pas une bonne réponse. "non défini" n'est pas un mot-clé dans Javascript. Voir constc.blogspot.com/2008/07/…
mhenry1384

16
Vous avez raison ... Mais la redéfinition undefinedest considérée comme un cas marginal et la comparaison ci-dessus fonctionnera dans 99% des cas.
Stefan Gehrig

6
Ne fonctionne pas si l'attribut a une chaîne vide. Un exemple est myattr = ''
mythicalprogrammer

3
@mhenry - alors vous seriez dans l'erreur :) Si vous construisiez le projet pour moi ou à mes côtés, je vous demanderais de corriger votre erreur. S'il s'agissait d'un package open source, je (ainsi que de nombreux utilisateurs) cesserais de l'utiliser en raison du fait qu'il était mal codé. Si vous ne le modifiez pas, quelqu'un d'autre finira par créer une version sans l'erreur et les gens l'utiliseront à la place, et vous perdrez votre propre projet, comme cela s'est produit plusieurs fois auparavant lorsque quelqu'un crée un package qui est une bonne idée avec mauvaise mise en œuvre. Quoi qu'il en soit, cela vous apprendrait une leçon sur les pratiques de codage :)
Jimbo Jonny

8
if (typeof $ ('# A'). attr ('myattr')! == 'undefined')
James Westgate

166

Je sais que cela fait longtemps que la question n'a pas été posée, mais j'ai trouvé le chèque plus clair comme ceci:

if ($("#A").is('[myattr]')) {
    // attribute exists
} else {
    // attribute does not exist
}

(Tel que trouvé sur ce site ici )

La documentation sur is peut être trouvée ici


Selon le W3C, les attributs booléens sont définis par la présence ou l'absence de l'attribut. jQuery fournit la méthode .attr () pour manipuler les valeurs d'attribut. Mais comment ajouter un attribut sans valeur? La méthode que vous fournissez pour tester la présence d'un attribut n'est pas décrite dans la documentation jQuery (1.8.2). Savez-vous comment ajouter un attribut avec jQuery?
chmike

@chmike Pour ajouter un attribut, je procéderais ainsi: $ ("# A"). prop ("myNewAttribute", someValue); Vous pouvez donner à someValue n'importe quelle valeur de votre choix: chaîne, nombre, chaîne vide, vrai / faux.
Jonathan Bergeron

Cela ajoutera l'attribut avec une valeur affectée qui n'est pas la même chose qu'un attribut sans valeur.
chmike

5
Je suis d'accord, c'est la meilleure réponse (en utilisant jQuery) - très claire et concise. Je me suis demandé pourquoi jQuery n'a pas seulement une fonction hasAttribute (), et la réponse est que javascript natif en a déjà une. Tout élément HTML Dom possède une méthode hasAttribute ('attributeName'). Vous pouvez donc faire: $ ('# A') [0] .hasAttribute ('myattr') @chmike - Je ne pense pas que vous pouvez ajouter un attribut vide en utilisant les fonctions jQuery, mais vous pouvez le faire avec l'élément HTML Dom objet d'une manière similaire comme suit: $ ("# A") [0] .setAttributeNode (document.createAttribute ("myNewAttribute"));
Daniel Howard

1
Juste un commentaire que j'aime cette réponse, mais était confus au sujet des commentaires demandant comment ajouter un attribut sans valeur. Ceux-ci ne sont pas liés à la question ou à la réponse.
goodeye

9

Cela fonctionnera:

$('#A')[0].hasAttribute('myattr');


@RetroCoder, quel est votre point sur votre lien? Ce test semble assez bon, surtout parce que souvent vous utilisez $(this).<something>quand ici vous pouvez le faire this.hasAttribute('...')directement (et ne vous souciez pas des anciens navigateurs, bien sûr.)
Alexis Wilke

8

En JavaScript, ...

null == undefined

... renvoie true*. C'est la différence entre ==et ===. En outre, le nom undefinedpeut être défini (ce n'est pas un mot-clé comme l' nullest), il vaut donc mieux vérifier d'une autre manière. Le moyen le plus fiable est probablement de comparer la valeur de retour de l' typeofopérateur.

typeof o == "undefined"

Néanmoins, la comparaison avec null devrait fonctionner dans ce cas.

* En supposant qu'il ne undefinedsoit en fait pas défini.


Undefined n'est pas un mot-clé réservé en JavaScript. Dans jQuery, il est possible de fusionner son nom exactement parce qu'il est construit avec le constructeur "var" et non valorisé. En haut du code de la bibliothèque magique, en fait, il y a une ligne qui indique "var undefined;" et de cette façon une variable non définie est définie avec ce nom dans la portée jQuery ... Mais elle pourrait tout de même être nommée "sans nom" en tapant "var sans nom;"
Emanuele Del Grande

1
Cela ne vérifie pas un attribut, cette vérification d'une propriété dans un objet javascript pourquoi cela a 6 votes positifs?
ncubica

5

$("input[attr]").length pourrait être une meilleure option.


4

Quelques idées ont été lancées en utilisant "typeof", jQuery ".is" et ".filter" alors j'ai pensé que j'en posterais une rapide comparaison de performances. Le typeof semble être le meilleur choix pour cela. Bien que les autres fonctionnent, il semble y avoir une nette différence de performances lors de l'appel de la bibliothèque jq pour cet effort.


2
if (!$("#element").attr('my_attr')){
  //return false
  //attribute doesn't exists
}

1
cela ne fonctionnera probablement pas, car vous pouvez ajouter un attribut sans valeur. dans ce cas, cette condition passera, bien que le comportement souhaité puisse être de renvoyer true, l'attribut est défini. similaire aux PHP isset()ou par exemple en js $("#element").attr('my_attr') === false,
ulkas

2

comme dans cet article , en utilisant .iset le sélecteur d'attribut [], vous pouvez facilement ajouter une fonction (ou un prototype):

function hasAttr($sel,attr) {
    return $sel.is('['+attr+']');
}


1

simplement:

$('input[name*="value"]')

plus d'informations: documents officiels


1
Des guillemets doubles non échappés dans la chaîne définie avec des guillemets doubles, pas une chaîne valide. Malheureusement, je ne peux pas le modifier pour vous car une modification doit changer 6 caractères ou plus, mais doit être modifiée.
Jimbo Jonny

0

En plus de sélectionner tous les éléments avec un attribut $('[someAttribute]')ou $('input[someAttribute]')vous pouvez également utiliser une fonction pour effectuer des vérifications booléennes sur un objet comme dans un gestionnaire de clic:

if(! this.hasAttribute('myattr') ) { ...


0

J'ai créé un package npm avec le comportement prévu comme décrit ci-dessus en question.

Lien vers [npm] et [github]

L'utilisation est très simple. Par exemple:

<p id="test" class="test">something</p>
$("#test").hasAttr("class")

renvoie vrai.

Fonctionne également avec le chameau.


0

Pour sélectionner des éléments ayant un certain attribut, voir les réponses ci-dessus.

Pour déterminer si un élément jQuery donné a un attribut spécifique, j'utilise un petit plugin qui retourne truesi le premier élément de la collection ajQuery a cet attribut:

/** hasAttr
 ** helper plugin returning boolean if the first element of the collection has a certain attribute
 **/
$.fn.hasAttr = function(attr) {
   return 0 < this.length
       && 'undefined' !== typeof attr
       && undefined !== attr
       && this[0].hasAttribute(attr)
}

-5

JQuery renverra l'attribut sous forme de chaîne. Par conséquent, vous pouvez vérifier la longueur de cette chaîne pour déterminer si elle est définie:

if ($("input#A").attr("myattr").length == 0)
 return null;
else
 return $("input#A").attr("myattr");

Donc, je sais que cela fait plus d'un an et j'aurais dû y remédier depuis longtemps. Je suis curieux de savoir quelle partie n'a pas fonctionné? Si je savais que vous essayiez simplement de les sélectionner, je n'aurais pas donné le code ci-dessus. Je pensais que tu voulais les vérifier individuellement. JQuery retourne en fait l'attribut sous forme de chaîne et vous pouvez vérifier la longueur de cette chaîne comme n'importe quelle autre chaîne. Donc, tant que votre sélecteur et votre attribut étaient corrects, vous auriez dû pouvoir tester pour voir si une entrée particulière avait cet attribut. Quoi qu'il en soit, je ne voulais tout simplement pas que les gens rejettent le principe parce qu'il fonctionne.
2012

6
il échouera dans le cas où l'attribut n'est pas présent, auquel cas $ ("input # A"). attr ("myattr") renvoie undefined plutôt qu'une chaîne et undefined.length échouera
Rune FS

Détecte uniquement un attribut vide par rapport à un avec du contenu, échoue sur un attribut inexistant. La question d'origine était de détecter l'existence de l'attribut, ce qui en fait un échec comme réponse à la question.
Jimbo Jonny
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.