Je me demande s'il existe un moyen d'avoir une logique "OU" dans les sélecteurs jQuery. Par exemple, je sais qu'un élément est soit un descendant d'un élément avec la classe classA ou classB, et je veux faire quelque chose comme elem.parents('.classA or .classB'). JQuery fournit-il une telle fonctionnalité?
Réponses:
Utilisez une virgule.
'.classA, .classB'Vous pouvez choisir d'omettre l'espace.
ANDserait .classA.classB.
L'utilisation d'une virgule peut ne pas être suffisante si vous avez plusieurs objets jQuery qui doivent être joints.
La méthode .add () ajoute les éléments sélectionnés au jeu de résultats:
// classA OR classB
jQuery('.classA').add('.classB');
Il est plus verbeux que '.classA, .classB', mais vous permet de créer des sélecteurs plus complexes comme celui-ci:
// (classA which has <p> descendant) OR (<div> ancestors of classB)
jQuery('.classA').has('p').add(jQuery('.classB').parents('div'));
J'ai écrit un plugin incroyablement simple (5 lignes de code) pour exactement cette fonctionnalité:
http://byrichardpowell.github.com/jquery-or/
Il vous permet de dire efficacement "obtenez cet élément, ou si cet élément n'existe pas, utilisez cet élément". Par exemple:
$( '#doesntExist' ).or( '#exists' );Bien que la réponse acceptée offre des fonctionnalités similaires à celle-ci, si les deux sélecteurs (avant et après la virgule) existent, les deux sélecteurs seront retournés.
J'espère que cela s'avérera utile à tous ceux qui pourraient atterrir sur cette page via google.
"a" || "b"vs. null || "b"dans vanilla JS. Si nous appliquons le même comportement ici, $(a).or(b)devrait retourner $(a)s'il existe, sinon il devrait revenir $(b). Je ne pense pas qu'il y ait quelque chose de mal avec cette nomenclature, car le "ou" correspond au comportement du JS "||" (ou) opérateur.
or. Ce dont les autres parlent est plus comme une action concatou merge.
Si vous cherchez à utiliser la construction standard de element = element1 || element2 où JavaScript retournera le premier qui est véridique, vous pouvez faire exactement cela:
element = $('#someParentElement .somethingToBeFound') || $('#someParentElement .somethingElseToBeFound');qui retournerait le premier élément réellement trouvé. Mais une meilleure façon serait probablement d'utiliser la construction virgule du sélecteur jQuery (qui renvoie un tableau d'éléments trouvés) de cette façon:
element = $('#someParentElement').find('.somethingToBeFound, .somethingElseToBeFound')[0];qui renverra le premier élément trouvé.
Je l'utilise de temps en temps pour trouver un élément actif dans une liste ou un élément par défaut s'il n'y a pas d'élément actif. Par exemple:
element = $('ul#someList').find('li.active, li:first')[0] qui renverra tout li avec une classe d'actif ou, s'il n'y en a pas, renverra simplement le dernier li.
Soit fonctionnera. Il existe cependant des pénalités de performance potentielles, car le || arrêtera le traitement dès qu'il trouvera quelque chose de véridique alors que l'approche tableau essaiera de trouver tous les éléments même s'il en a déjà trouvé un. Là encore, en utilisant le || La construction peut potentiellement avoir des problèmes de performances si elle doit passer par plusieurs sélecteurs avant de trouver celui qu'elle renverra, car elle doit appeler l'objet jQuery principal pour chacun (je ne sais vraiment pas s'il s'agit d'un résultat de performance ou non, il semble juste logique que cela puisse être). En général, cependant, j'utilise l'approche tableau lorsque le sélecteur est une chaîne assez longue.