javascript - 根据部分属性查找 HTML

Question

有没有一种方法可以使用 javascript(特别是 jQuery)根据部分属性 name 查找元素？

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

• starts with [名称^="值"]
• contains prefix [名称|=“值”]
• contains [名称*=“值”]
• contains word [名称~=“值”]
• ends with [名称$=“值”]
• equals [名称=“值”]
• not equal [名称!=“值”]
• starts with [名称^="值"]

但更多的是

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

和

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

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

Answer 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/