jQuery selecionar por atributo usando os operadores AND e OR

105

Estou pensando se é possível em jQuery selecionar elementos por atributos nomeados usando AND e OR.

Exemplo:

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

Eu gostaria de selecionar todos os elementos onde, myc="blue"mas apenas aqueles com myiddefinido como 1 ou 3.

Então eu tentei:

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

mas não funciona, mesmo aqui:

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

É possível sem escrever funções de filtro especiais?

— O Bndr
fonte

7

NB: Você não deveria inventar seus próprios atributos como myce myid. Se você estiver usando HTML5, prefixe-os com data-: data-myce data-myid.

— RoToRa

@RoToRa, existe documentação em HTML5 que diz que você deve fazer isso? A maioria dos sites que vejo usa tudo o que o cérebro do desenvolvedor pensa na época ...

— Alexis Wilke

1

Só porque as pessoas fazem isso, não significa que seja correto. Consulte HTML5 Seção 3.2.1 : "Os autores não devem usar elementos, atributos ou valores de atributos que não são permitidos por esta especificação ou outras especificações aplicáveis, pois isso torna significativamente mais difícil que o idioma seja estendido no futuro."

— RoToRa de

1

É um exemplo pobre de uma boa pergunta. E quanto aos diferentes tipos de elementos, como entradas?

— jesus g_force Harris

193

Operação E

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

Operação OR , use vírgulas

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

Como @Vega comentou:

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

— Gabe
fonte

1

Acho que ele quer omyc == blue && (id == 1 || id == 3)

— Selvakumar Arumugam

2

se eu usar a=$('[myc="blue"] [myid="1"],[myid="3"]');isso significa ([myc="blue"] AND [myid="1"]) OR [myid="3"]ou ([myc="blue"]) AND ([myid="1"] OR [myid="3"]) estou procurando o segundo // Editar: obrigado por essa atualização! :-)

— The Bndr

18

Uso simples .filter() ^[docs] (AND) usando o seletor múltiplo ^[docs] (OR):

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

Em geral, os seletores de encadeamento, como a.foo.bar[attr=value]é uma espécie de seletor AND.

jQuery tem uma extensa documentação sobre os seletores suportados, vale a pena ler.

— Felix Kling
fonte

você sabe, se isso é mais rápido do que a resposta de gabe?

— The Bndr

Eu não sei, talvez, talvez não.

— Felix Kling

10

Que tal escrever um filtro como abaixo,

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

Edit: @Jack Obrigado .. perdi totalmente ..

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

DEMO

— Selvakumar Arumugam
fonte

5

O operador and em um seletor é apenas uma string vazia e o operador ou é a vírgula.

No entanto, não há agrupamento ou prioridade, então você deve repetir uma das condições:

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

— Guffa
fonte

você precisa dessas citações? Quero dizer, apenas para consistência ... provavelmente só eu. >. <

— Selvakumar Arumugam

1

@Vega: Você não precisa de aspas para strings simples como blue, mas eu não tinha certeza sobre os valores numéricos, então os guardei.

— Guffa

5

Primeiro encontre a condição que ocorre em todas as situações e, em seguida, filtre as condições especiais:

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

— Ja͢ck
fonte

1

No seu caso especial, seria

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

— Paulo
fonte

0

JQuery usa seletores CSS para selecionar elementos, então você só precisa usar mais de uma regra, separando-os com vírgulas, da seguinte forma:

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

Editar:

Desculpe, você queria azul e 1 ou 3. Que tal:

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

Colocar os dois seletores de atributo juntos fornece AND, usando uma vírgula fornece OR.

— philnash
fonte

1

Acho que ele quer omyc == blue && (id == 1 || id == 3)

— Selvakumar Arumugam

Você precisa repetir o [myc="blue"]seletor no segundo exemplo.

— RoToRa

-1

Para selecionar corretamente os elementos usando as operações lógicas que você definiu, você só precisa jQuery.filter()da ANDoperação, não de "funções de filtro especiais". Você também precisa jQuery.add()para a ORoperação.

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

Alternativamente, é possível realizar usando taquigrafia em um único seletor, onde seletores de interferência juntos atuam como um ANDe separando com uma vírgula atua como um OR:

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

— mVChr
fonte