jquery select class with value

Question

i want to use the html data-* attributes and have some images like this:

<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 can i now just only get the ones with data-selected="true"?

I tried:

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

but this seems not to be the best way to me. Is there a direct selector where i can do something like

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

thanks for your help!!

Answer 1

$("img[data-selected='true']") but quoting of value isn't obligatory.

PS: it is called CSS attribute selector.

Answer 2

Well for one thing you should use .data(...)

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

Or you can use:

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