jQuery seleziona per attributo utilizzando gli operatori AND e OR

105

Sto pensando, se è possibile in jQuery selezionare elementi mediante attributi denominati utilizzando AND e OR.

Esempio:

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

Vorrei selezionare tutti gli elementi in cui myc="blue"ma solo quelli myidimpostati su 1 o 3.

Quindi ho provato:

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

ma non funziona, lo stesso qui:

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

È possibile senza scrivere funzioni di filtro speciali?

— Il Bndr
fonte

7

NB: Non dovresti inventare i tuoi attributi come myce myid. Se stai usando HTML5, anteponi loro data-: data-myce data-myid.

— RoToRa

@RoToRa, c'è della documentazione in HTML5 che dice che dovresti farlo? La maggior parte dei siti web che vedo usa qualunque cosa pensi il cervello dello sviluppatore in quel momento ...

— Alexis Wilke

1

Solo perché le persone lo fanno, non significa che sia corretto. Vedere la sezione HTML5 3.2.1 : "Gli autori non devono utilizzare elementi, attributi o valori di attributo non consentiti da questa specifica o da altre specifiche applicabili, poiché ciò rende notevolmente più difficile l'estensione del linguaggio in futuro."

— RoToRa

1

È un cattivo esempio di una buona domanda. E i diversi tipi di elementi come gli input?

— jesus g_force Harris

193

E funzionamento

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

Operazione OR , utilizzare virgole

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

Come ha commentato @Vega:

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

— Gabe
fonte

1

Penso che voglia ilmyc == blue && (id == 1 || id == 3)

— Selvakumar Arumugam

2

se uso a=$('[myc="blue"] [myid="1"],[myid="3"]');vuol dire ([myc="blue"] AND [myid="1"]) OR [myid="3"]o ([myc="blue"]) AND ([myid="1"] OR [myid="3"]) sto cercando il secondo // Modifica: grazie per l'aggiornamento! :-)

— Il Bndr

18

Utilizzo semplice .filter() ^[docs] (AND) utilizzando il selettore multiplo ^[docs] (OR):

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

In generale, concatenare i selettori, come a.foo.bar[attr=value]è una sorta di selettore AND.

jQuery ha un'ampia documentazione sui selettori supportati, vale la pena leggerlo.

— Felix Kling
fonte

sai, se questo è più veloce della risposta di gabe?

— Il Bndr

Non lo so, forse, forse no.

— Felix Kling

10

Che ne dici di scrivere un filtro come di seguito,

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

Modifica: @Jack Grazie .. totalmente mancato ..

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

DEMO

— Selvakumar Arumugam
fonte

5

L'operatore e in un selettore è solo una stringa vuota e l'operatore o è la virgola.

Non esiste tuttavia alcun raggruppamento o priorità, quindi devi ripetere una delle condizioni:

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

— Guffa
fonte

hai bisogno di quelle citazioni? Intendo solo per coerenza .. probabilmente solo io. >. <

— Selvakumar Arumugam

1

@Vega: non hai bisogno di virgolette per stringhe semplici come blue, ma non ero sicuro dei valori numerici, quindi li ho tenuti.

— Guffa

5

Prima trova la condizione che si verifica in tutte le situazioni, quindi filtra le condizioni speciali:

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

— Jack
fonte

1

Nel tuo caso speciale lo sarebbe

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

— Paolo
fonte

0

JQuery utilizza i selettori CSS per selezionare gli elementi, quindi devi solo usare più di una regola separandoli con virgole, in questo modo:

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

Modificare:

Mi spiace, volevi blu e 1 o 3. Che ne dici di:

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

Mettere insieme i due selettori di attributi ti dà AND, usando una virgola ti dà OR.

— philnash
fonte

1

Penso che voglia ilmyc == blue && (id == 1 || id == 3)

— Selvakumar Arumugam

È necessario ripetere il [myc="blue"]selettore nel secondo esempio.

— RoToRa

-1

Per selezionare correttamente gli elementi utilizzando le operazioni logiche che hai indicato, è sufficiente jQuery.filter()l' ANDoperazione, non "funzioni di filtro speciali". È necessario anche jQuery.add()per l' ORoperazione.

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

In alternativa, è possibile eseguire la stenografia in un singolo selettore, dove i selettori di disturbo insieme agiscono come un ANDe la separazione con una virgola funge da OR:

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

— mVChr
fonte