根据部分属性查找 HTML答案

【问题标题】：Find HTML based on partial attribute根据部分属性查找 HTML
【发布时间】：2012-08-30 14:19:04
【问题描述】：

有没有办法使用 javascript（尤其是 jQuery）根据部分属性 name 查找元素？

我不是在寻找任何找到这些链接中引用的部分属性值的选择器：

starts with [name^="value"]
contains prefix [name|="value"]
contains [name*="value"]
contains word [name~="value"]
ends with [name$="value"]
equals [name="value"]
not equal [name!="value"]
starts with [name^="value"]

但更多类似

<div data-api-src="some value"></div>
<div data-api-myattr="foobar"></div>

和

$("[^data-api]").doSomething()

查找具有以“data-api”开头的属性的任何元素。

【问题讨论】：

这个问题可能会有所帮助：jquery data selector
会一直是“data-”属性吗？
@ianpgall 很有可能，是的。它们在某种程度上相似（如 data-api），然后属性名称的其余部分可能有意义。
@jrummell 似乎我仍然需要知道整个数据键。在这种情况下，我可能有一系列 data-api-* 键，并希望找到与它们匹配的任何内容

标签： javascript jquery jquery-selectors

【解决方案1】：

这使用.filter() 将候选人限制为具有data-api-* 属性的候选人。可能不是最有效的方法，但如果您可以先使用相关选择器缩小搜索范围，则可以使用。

$("div").filter(function() {
    var attrs = this.attributes;
    for (var i = 0; i < attrs.length; i++) {
        if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;       
    };
    return false;
}).css('color', 'red');

演示：http://jsfiddle.net/r3yPZ/2/

这也可以写成选择器。这是我的新手尝试：

$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) {
    for (var i = 0; i < obj.attributes.length; i++) {
        if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true;
    };
    return false;
};

用法：

$('div:hasAttrWithPrefix(data-api-)').css('color', 'red');

演示：http://jsfiddle.net/SuSpe/3/

这个选择器应该适用于 1.8 之前的 jQuery 版本。对于 1.8 及更高版本，some changes may be required。以下是 1.8 兼容版本的尝试：

$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) {
    return function(obj) {
        for (var i = 0; i < obj.attributes.length; i++) {
            if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true;
        };
        return false;
    };
});

演示：http://jsfiddle.net/SuSpe/2/

对于更通用的解决方案，这里有一个选择器，它采用正则表达式模式并选择具有与该模式匹配的属性的元素：

$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) {
    var re = new RegExp(regex);
    return function(obj) {
        var attrs = obj.attributes
        for (var i = 0; i < attrs.length; i++) {
            if (re.test(attrs[i].nodeName)) return true;
        };
        return false;
    };
});

对于你的例子，这样的事情应该可以工作：

$('div:hasAttr(^data-api-.+$)').css('color', 'red');

演示：http://jsfiddle.net/Jg5qH/1/

【讨论】：

这是一个很好的解决方案。我喜欢能够将它用作选择器。谢谢。

【解决方案2】：

不知道你在找什么，但只是花了几分钟写这个：

$.fn.filterData = function(set) {
    var elems=$([]);
    this.each(function(i,e) {
        $.each( $(e).data(), function(j,f) {
            if (j.substring(0, set.length) == set) {
                elems = elems.add($(e));
            }
        });
    });
    return elems;
}

像这样使用：

$('div').filterData('api').css('color', 'red');

并且将匹配任何具有data-api-* 等数据属性的元素，您可以对其进行扩展和修改以包含更多选项等，但目前它仅搜索数据属性，并且仅匹配“开始于”，但是至少使用起来很简单？

FIDDLE

【讨论】：