JQuery выбрать класс со значением

Question

Я хочу использовать атрибуты html data-* и иметь несколько изображений, подобных этому:

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

как теперь я могу получить только те, у кого data-selected="true"?

Я пытался:

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

но мне кажется, это не лучший способ. Есть ли прямой селектор, где я могу сделать что-то вроде

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

спасибо за вашу помощь !!

Answer 1

$("img[data-selected='true']") но цитирование значения не обязательно.

PS: это называется CSS attribute selector.

Answer 2

Ну, во-первых, вы должны использовать .data(...)

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

Или вы можете использовать:

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

Answer 3

Попробуйте:

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

Используется атрибут , равный селектору

Answer 4

Вы можете использовать атрибут селектора

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

Другая альтернатива - filter()

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

Обратите внимание, что для доступа к атрибутам данных вы можете использовать метод data(), и вам просто нужно передать вторую половину имени атрибута данных.

Answer 5

Вы можете использовать

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

, есть гораздо больше селекторов, чем просто теги и классы.Смотрите здесь на w3.org

Answer 6

Попробуйте следующий селектор

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

Answer 7

Это какой-то способ сделать это без использования jQuery:

var imgs = document.getElementsByTagName('img');

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

И вам не нужен jQuery!