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

【问题标题】：How can I select an element with jQuery by matching a partial attribute? [duplicate]如何通过匹配部分属性来选择带有 jQuery 的元素？ [复制]
【发布时间】：2014-02-08 19:56:22
【问题描述】：

例如，我想匹配在其任何属性中具有“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 是否支持这种类型的选择器。

【问题讨论】：

谢谢。你有那个来源吗？
@AlienArrays - OP 编辑了他的原始代码并修复了它。
查看:contains() api.jquery.com/contains-selector
我为您设置了一个答案，以匹配任何具有包含您选择的字符串的属性的 a 元素。

标签： javascript jquery jquery-selectors

【解决方案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"});  
    }
});

【讨论】：

哈哈，这太完美了。这正是我想要的。谢谢！

【解决方案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），并获得您需要的特异性。

【讨论】：

我知道我可以轻松添加一个类，但这违背了我的问题的目的。我选择这些元素没有问题，我只想通过部分属性名称进行选择。
（点头）我明白了，但我不知道这样做，所以我只是建议重新调整你的架构以提供一些通用和特定的信息。也就是说，“这个东西是一个 foo，但更具体地说，它是一个 foo-bar”。有点像 ID（特定）和类（通用）之间的区别。
Dayumn，这就是我的预期。谢谢你帮我瘦下来！