如何通过匹配部分属性来选择带有jQuery的元素？ [重复]

Question

这个问题在这里已有答案：

• Wildcards in HTML5 data attributes 4个答案

例如，我想匹配在其任何属性中具有“data-foo”的所有元素：

<a data-foo="abc" href="#">I'm Matched</a>
<a data-foo-bar="abc" href="#">I'm Matched Too</a>
<a data-foo-bar-baz="abc" href="#">I'm Matched Too</a>

<a data-bar-foo="abc" href="#">I'm Not Matched</a>

我可以轻松遍历所有元素并检查自己，但我不确定jQuery是否支持这种类型的选择器。

Answer 1

检查这个小提琴...有点在那里，但也许你可以解决这个问题

JSFiddle

$("a").each(function(){
    var element = $(this);
    var isItMe = 0;
        $(element[0].attributes).each(function() {
             if(this.nodeName.indexOf("data-bar") >= 0){
                isItMe = 1;
             }
        });
    if(isItMe == 1){
        $(this).css({"color" : "red"});  
    }
});

Answer 2

Satpal的答案非常好（我喜欢选择器仅限于<a>元素;这将比搜索整个DOM快一点）。

不过，我想建议您使用多个数据属性。例如：

<a data-foo="abc" href="#">I'm Matched</a>
<a data-foo="abc" data-foo-bar="abc" href="#">I'm Matched Too</a>
<a data-foo="abc" data-foo-bar-baz="abc" href="#">I'm Matched Too</a>

<a data-bar-foo="abc" href="#">I'm Not Matched</a>

或者课程：

<a class="foo" data-foo="abc" href="#">I'm Matched</a>
<a class="foo" data-foo-bar="abc" href="#">I'm Matched Too</a>
<a class="foo" data-foo-bar-baz="abc" href="#">I'm Matched Too</a>

<a data-bar-foo="abc" href="#">I'm Not Matched</a>

通过这种方式，你可以匹配一件事（data-foo或类foo），并获得你需要的特异性。