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?

— 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

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