jQuery OR Sélecteur?
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 un descendant d'un élément de classe classA ou classB et je souhaite faire quelque chose comme elem.parents('.classA or .classB'). JQuery fournit-il une telle fonctionnalité?
Utilisez une virgule.
'.classA, .classB'
Vous pouvez choisir d'omettre l'espace.
L'utilisation d'une virgule peut ne pas être suffisante si plusieurs objets jQuery 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');
C'est plus bavard 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/
Cela 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' );
Alors que la réponse acceptée fournit une fonctionnalité similaire à celle-ci, si les deux sélecteurs (avant et après la virgule) existent, ils seront renvoyés.
J'espère que cela sera utile à quiconque pourrait atterrir sur cette page via google.
Si vous souhaitez utiliser la construction standard de element = element1 || element2 où JavaScript retournera le premier qui est la vérité, vous pouvez faire exactement cela:
element = $('#someParentElement .somethingToBeFound') || $('#someParentElement .somethingElseToBeFound');
qui renverrait le premier élément réellement trouvé. Mais une meilleure solution consisterait probablement à utiliser la construction de virgule de sélecteur jQuery (qui renvoie un tableau d'éléments trouvés) de cette manière:
element = $('#someParentElement').find('.somethingToBeFound, .somethingElseToBeFound')[0];
qui retournera le premier élément trouvé.
J'utilise cela de temps en temps pour trouver soit un élément actif dans une liste, soit 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 retournera n'importe quel li avec une classe d'actif ou, s'il n'y en a pas, retournera simplement le dernier li.
Soit travaillera. Il y a cependant des pénalités de performance possibles, comme || arrêtera le traitement dès qu’il trouvera quelque chose de vrai alors que la méthode du tableau essaiera de trouver tous les éléments même s’il en a déjà trouvé un. Puis encore, en utilisant le || construct peut potentiellement avoir des problèmes de performances s'il doit passer par plusieurs sélecteurs avant de trouver celui qui sera renvoyé, car il doit appeler l'objet principal jQuery pour chacun (je ne sais vraiment pas s'il s'agit d'un impact sur les performances ou non, cela semble tout simplement 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.
Enfin, j'ai trouvé comment bidouiller:
div:not(:not(.classA,.classB)) > span
(sélectionne div avec la classe classA OR classB avec un span direct)