jQuery sélectionner par attribut à l'aide des opérateurs AND et OR

105

Je pense à, s'il est possible dans jQuery de sélectionner des éléments par des attributs nommés en utilisant AND et OR.

Exemple:

<div myid="1" myc="blue">1</div>
<div myid="2" myc="blue">2</div>
<div myid="3" myc="blue">3</div>
<div myid="4">4</div>

Je voudrais sélectionner tous les éléments où, myc="blue"mais uniquement ceux dont la valeur myidest 1 ou 3.

Alors j'ai essayé:

a=$('[myc="blue"] [myid="1"]  [myid="3"]');

mais ça ne marche pas, pareil ici:

a=$('[myc="blue"] && [myid="1"] || [myid="3"]');

Est-ce possible sans écrire des fonctions de filtrage spéciales?

jquery jquery-selectors find operators Le Bndr
la source
7
NB: Vous ne devriez pas créer vos propres attributs comme mycet myid. Si vous utilisez HTML5, préfixez-les avec data-: data-mycet data-myid.
RoToRa
@RoToRa, y a-t-il une documentation en HTML5 qui dit que vous devriez le faire? La plupart des sites Web que je vois utilisent tout ce à quoi le cerveau du développeur pense à l'époque ...
Alexis Wilke
1
Ce n'est pas parce que les gens le font que c'est correct. Voir HTML5 Section 3.2.1 : "Les auteurs ne doivent pas utiliser d'éléments, d'attributs ou de valeurs d'attributs qui ne sont pas autorisés par cette spécification ou d'autres spécifications applicables, car cela rend considérablement plus difficile l'extension du langage à l'avenir."
RoToRa
1
C'est un mauvais exemple de bonne question. Qu'en est-il des différents types d'éléments comme les entrées?
jesus g_force Harris

Réponses:

193

ET opération

a=$('[myc="blue"][myid="1"][myid="3"]');

Opération OR , utilisez des virgules

a=$('[myc="blue"],[myid="1"],[myid="3"]');

Comme l'a commenté @Vega:

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Gabe
la source
1
Je pense qu'il veut est lemyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
2
si j'utilise a=$('[myc="blue"] [myid="1"],[myid="3"]');ça veut dire ([myc="blue"] AND [myid="1"]) OR [myid="3"]ou ([myc="blue"]) AND ([myid="1"] OR [myid="3"]) je cherche le 2ème // Edit: merci pour cette mise à jour! :-)
Le Bndr
18

Utilisation simple .filter() [docs] (AND) en utilisant le sélecteur multiple [docs] (OR):

$('[myc="blue"]').filter('[myid="1"],[myid="2"]');

En général, les sélecteurs de chaînage, comme a.foo.bar[attr=value]une sorte de sélecteur AND.

jQuery a une documentation complète sur les sélecteurs pris en charge, cela vaut la peine d'être lu.

Félix Kling
la source
savez-vous si c'est plus rapide que la réponse de gabe?
The Bndr
Je ne sais pas, peut-être, peut-être pas.
Felix Kling
10

Que diriez-vous d'écrire un filtre comme ci-dessous,

$('[myc="blue"]').filter(function () {
   return (this.id == '1' || this.id == '3');
});

Edit: @Jack Merci ... totalement manqué ..

$('[myc="blue"]').filter(function() {
   var myId = $(this).attr('myid');   
   return (myId == '1' || myId == '3');
});

DEMO

Selvakumar Arumugam
la source
5

L'opérateur and dans un sélecteur est juste une chaîne vide et l'opérateur ou est la virgule.

Il n'y a cependant pas de regroupement ni de priorité, vous devez donc répéter l'une des conditions:

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');
Guffa
la source
avez-vous besoin de ces citations? Je veux dire juste pour la cohérence ... probablement juste moi. >. <
Selvakumar Arumugam
1
@Vega: Vous n'avez pas besoin de guillemets pour des chaînes simples comme blue, mais je n'étais pas sûr des valeurs numériques, alors je les ai gardées.
Guffa
5

Recherchez d'abord la condition qui se produit dans toutes les situations, puis filtrez les conditions spéciales:

$('[myc="blue"]')
    .filter('[myid="1"],[myid="3"]');
Jack
la source
1

Dans votre cas particulier, ce serait 

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Paul
la source
0

JQuery utilise des sélecteurs CSS pour sélectionner des éléments, il vous suffit donc d'utiliser plus d'une règle en les séparant par des virgules, comme suit:

a=$('[myc="blue"], [myid="1"], [myid="3"]');

Éditer:

Désolé, vous vouliez du bleu et 1 ou 3. Que diriez-vous:

a=$('[myc="blue"][myid="1"],  [myid="3"]');

L'association des deux sélecteurs d'attributs vous donne ET, l'utilisation d'une virgule vous donne OU.

Philnash
la source
1
Je pense qu'il veut est lemyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
Vous devez répéter le [myc="blue"]sélecteur dans le deuxième exemple.
RoToRa
-1

Pour sélectionner correctement les éléments en utilisant les opérations logiques que vous avez indiquées, vous n'avez besoin que jQuery.filter()de l' ANDopération, pas de "fonctions de filtrage spéciales". Vous avez également besoin jQuery.add()pour l' ORopération.

var elements = $('[myc="blue"]').filter('[myid="1"').add('[myid="3"');

Alternativement, il est possible d'accomplir l'utilisation de la sténographie dans un seul sélecteur, où les sélecteurs de brouillage agissent ensemble comme un ANDet la séparation avec une virgule agit comme un OR:

var elements = $('[myc="blue"][myid="1"], [myid="3"]');
mVChr
la source