jQuery selecciona por atributo usando operadores AND y OR

105

Estoy pensando en si es posible en jQuery seleccionar elementos por atributos con nombre usando AND y OR.

Ejemplo:

<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>

Me gustaría seleccionar todos los elementos donde, myc="blue"pero solo aquellos que están myidconfigurados en 1 o 3.

Así que intenté:

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

pero no funciona, lo mismo aquí:

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

¿Es posible sin escribir funciones de filtro especiales?

jquery jquery-selectors find operators El Bndr
fuente
7
NB: No debería inventar sus propios atributos como mycy myid. Si está utilizando HTML5 como prefijo data-: data-mycy data-myid.
RoToRa
@RoToRa, ¿hay documentación en HTML5 que diga que debería hacerlo? La mayoría de los sitios web que veo usan lo que el cerebro del desarrollador piensa en ese momento ...
Alexis Wilke
1
El hecho de que la gente lo haga no significa que sea correcto. Consulte la Sección 3.2.1 de HTML5 : "Los autores no deben usar elementos, atributos o valores de atributo que no estén permitidos por esta especificación u otras especificaciones aplicables, ya que hacerlo dificulta significativamente la extensión del lenguaje en el futuro".
RoToRa
1
Es un mal ejemplo de una buena pregunta. ¿Qué pasa con los diferentes tipos de elementos como las entradas?
jesus g_force Harris

Respuestas:

193

Y operación

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

O operación, use comas

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

Como comentó @Vega:

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Gabe
fuente
1
Creo que quiere es elmyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
2
si uso a=$('[myc="blue"] [myid="1"],[myid="3"]');¿significa ([myc="blue"] AND [myid="1"]) OR [myid="3"]o ([myc="blue"]) AND ([myid="1"] OR [myid="3"]) estoy buscando el segundo? // Editar: ¡gracias por esa actualización! :-)
The Bndr
18

Uso simple .filter() [docs] (Y) usando el selector múltiple [docs] (OR):

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

En general, encadenar selectores, como a.foo.bar[attr=value]es una especie de selector AND.

jQuery tiene una extensa documentación sobre los selectores compatibles, vale la pena leerlo.

Felix Kling
fuente
¿sabes, si esto es más rápido que la respuesta de gabe?
The Bndr
No lo sé, tal vez, tal vez no.
Felix Kling
10

¿Qué tal escribir un filtro como el siguiente?

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

Editar: @Jack Gracias ... me lo perdí totalmente ...

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

MANIFESTACIÓN

Selvakumar Arumugam
fuente
5

El operador y en un selector es solo una cadena vacía y el operador o es la coma.

Sin embargo, no hay agrupación ni prioridad, por lo que debe repetir una de las condiciones:

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');
Guffa
fuente
¿Necesitas esas citas? Me refiero solo a la coherencia ... probablemente solo a mí. >. <
Selvakumar Arumugam
1
@Vega: No necesitas comillas para cadenas simples como blue, pero no estaba seguro de los valores numéricos, así que las guardé.
Guffa
5

Primero encuentre la condición que ocurre en todas las situaciones, luego filtre las condiciones especiales:

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

En tu caso especial sería 

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

JQuery usa selectores CSS para seleccionar elementos, por lo que solo necesita usar más de una regla separándolos con comas, así:

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

Editar:

Lo siento, querías azul y 1 o 3. Qué tal:

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

Poner los dos selectores de atributos juntos le da Y, usar una coma le da OR.

Philnash
fuente
1
Creo que quiere es elmyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
Necesita repetir el [myc="blue"]selector en el segundo ejemplo.
RoToRa
-1

Para seleccionar correctamente los elementos utilizando las operaciones lógicas que ha indicado, solo necesita jQuery.filter()la ANDoperación, no las "funciones de filtro especiales". También necesitas jQuery.add()para la ORoperación.

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

Alternativamente, es posible lograrlo usando taquigrafía en un solo selector, donde los selectores de interferencia juntos actúan como un ANDy separándolos con una coma actúa como un OR:

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