jQuery ou 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 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'). Est-ce que jQuery fournit une telle fonctionnalité?

293
demandé sur BoltClock 2010-02-15 06:52:24

5 réponses

Utilisez une virgule.

'.classA, .classB'

Vous pouvez choisir d'omettre l'espace.

453
répondu Daniel A. White 2015-04-13 07:47:10

L'utilisation d'une virgule peut ne pas être suffisante si vous avez plusieurs objets jQuery qui doivent être joints.

Le .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 verbeux que '.classA, .classB', mais vous permet de construire des sélecteurs plus complexes comme ceux-ci:

// (classA which has <p> descendant) OR (<div> ancestors of classB)
jQuery('.classA').has('p').add(jQuery('.classB').parents('div'));
64
répondu Alp 2012-04-20 15:14:31

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 "obtenir 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 des fonctionnalités similaires à cela, si les deux sélecteurs (avant et après la virgule) existent, les deux sélecteurs seront retournés.

J'espère que ça prouve utile à tous ceux qui pourraient atterrir sur cette page via google.

17
répondu By Richard Powell 2012-11-07 16:24:17

Si vous cherchez à utiliser la construction standard de element = element1 / / element2 où JavaScript retournera le premier qui est vrai, vous pouvez faire exactement cela:

element = $('#someParentElement .somethingToBeFound') || $('#someParentElement .somethingElseToBeFound');

Qui retournerait le premier élément qui est réellement trouvé. Mais une meilleure façon serait probablement d'utiliser le sélecteur jQuery virgule construire (qui retourne un tableau d'éléments trouvés) de cette façon:

element = $('#someParentElement').find('.somethingToBeFound, .somethingElseToBeFound')[0];

Qui retournera le premier élément trouvé.

Je l'utilise de temps en temps pour trouvez 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 active ou, s'il n'y en a pas, renverra simplement le dernier li.

L'un ou l'autre fonctionnera. Il y a cependant des pénalités de performance potentielles, car le / / arrêtera le traitement dès qu'il trouvera quelque chose de vrai alors que l'approche array essaiera de trouver tous les éléments même s'il en a déjà trouvé un. Puis de nouveau, à l'aide de l' || construct pourrait potentiellement avoir des problèmes de performance s'il doit passer par plusieurs sélecteurs avant de trouver celui qu'il retournera, car il doit appeler l'objet jQuery principal pour chacun (Je ne sais vraiment pas s'il s'agit d'un hit de performance ou non, il semble logique que cela puisse être). En général, cependant, j'utilise l'approche array lorsque le sélecteur est une chaîne plutôt longue.

13
répondu Ken Dickinson 2013-12-12 16:32:58

Daniel A. White Solution fonctionne très bien pour les classes.

J'ai une situation où j'ai dû trouver des champs de saisie comme donee_1_card où 1 est un indice.

Ma solution a été

$("input[name^='donee']" && "input[name*='card']")

Bien que je ne sache pas à quel point c'est optimal.

0
répondu FDussault 2015-10-23 14:36:30