Jquery select class with value

Question

I want to use html data-* attributes and have the following images:

 <img src="http://placehold.it/100.png" data-selected="true"> <img src="http://placehold.it/100.png" data-selected="false"> <img src="http://placehold.it/100.png" data-selected="false"> <img src="http://placehold.it/100.png" data-selected="true"> <img src="http://placehold.it/100.png" data-selected="false"> 

how now can I get only those with data-selected="true" ?

I tried:

 $("img").each(function(){ if($(this)).attr("data-selected") == "true") { //do something } } 

but that doesn't seem to be the best way for me. Is there a direct selector where I can do something like

  $("img data-selected=true") ? 

thank you for your help!

Answer 1

$("img[data-selected='true']") , but quoting the value is optional.

PS: it's called a CSS attribute selector .

Answer 2

Well, on the one hand, you should use .data(...)

 $("img").each(function(){ if($(this)).data("selected") == "true") { //do something } } 

Or you can use:

 $("img[data-selected='true']").something... 

Answer 3

Try:

 $("img[data-selected='true']") 

Attribute equal to selector used

Answer 4

You can use attribute selector

 $("img[data-selected='true']"); 

Another alternative is filter()

 $("img").filter(function(){ return $(this).data("selected") == "true" }); 

Note that you can use the data() method to access data attributes, and you just need to pass the second half of the data attribute name.

Answer 5

Try the following selector

 $('img[data-selected="true"]') 

Answer 6

you can use

 $("img[data-selected='true']") 

there are many more selectors than just tags and classes. See here at w3.org

Answer 7

This can be done without using jQuery:

 var imgs = document.getElementsByTagName('img'); imgs.​​​​​map(function (img) { if (img.attributes["data-selected"].value == "true") { // do something } });​ 

And you do not need jQuery!