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