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

請嘗試以下選擇

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

Answer 3

嘗試：

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

它使用attribute equals selector

Answer 4

好一件事，你應該使用.data(...)

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

或者你可以使用：

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

Answer 5

您可以使用屬性選擇

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

其他替代方案是filter()

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

注意，要訪問數據屬性，你可以使用data()方法，你只要必須傳遞數據屬性名稱的後半部分。

Answer 6

您可以使用

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

有很多不僅僅是標籤和類的更多選擇的。見here on w3.org

Answer 7

這是某種方式來做到這一點，而不使用jQuery：

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

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

而且你不需要jQuery的！