根据部分属性查找HTML?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (83)

有没有一种方法与JavaScript(特别是jQuery)找到一个基于部分属性名称的元素?

我没有找到任何查找这些链接中引用的部分属性值的选择器:

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

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

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

提问于
用户回答回答于

不知道你在找什么,只是花了几分钟写了这个:

$.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

用户回答回答于

.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及更高版本,可能需要进行一些更改。这是一个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/

扫码关注云+社区

领取腾讯云代金券