JQuery selects an attribute using the AND and OR operators

Question

I think if in jQuery you can select elements by named attributes using AND and OR.

Example:

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

I would like to highlight all elements where myc="blue" , but only those whose myid set to 1 or 3.

So I tried:

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

but it does not work, same thing:

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

Is this possible without writing special filter functions?

Answer 1

And the operation

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

OR , use commas

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

As @Vega commented:

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

Answer 2

Simple use of .filter() ^[docs] (AND) using the multiple ^[docs] (OR) selector :

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

In general, chain selectors, such as a.foo.bar[attr=value] , are a kind of AND selector.

jQuery extensive documentation on supported selectors is worth a read.

Answer 3

How to write a filter as shown below

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

Edit: @Jack Thank you .. completely missed this.

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

Demo

Answer 4

The operator and in the selector is just an empty string, and the operator or is a comma.

However, there is no grouping or priority, so you need to repeat one of the conditions:

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

Answer 5

First, find the condition that occurs in all situations, then filter out the special conditions:

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

Answer 6

In your special case it will be

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

Answer 7

JQuery uses a CSS selector to select elements, so you just need to use multiple rules, separated by commas like this:

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

Edit:

Sorry, you like blue and 1 or 3. How about:

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

Putting two attribute selectors gives you AND, using a comma, you get OR.

Answer 8

To correctly select elements using the specified logical operations, you just need jQuery.filter() for the AND operation, and not "special filter functions". You also need jQuery.add() for the OR operation.

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

Alternatively, you can use the abbreviation in one selector, where the interference selectors together act as AND , and the comma separation acts like OR :

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