javascript - 是否有现有或即将推出的 CSS3 选择器来匹配属性名称的子字符串？

Question

您可以[foo^="bar"]匹配具有foo以 开头的属性的节点bar。

有没有办法匹配具有以特定字符串开头的属性名称的节点？其用例是将所有节点与一个data-*属性匹配。

编辑：我尝试这样做的原因是避免遍历所有节点以查找这些属性（出于性能原因）。我会在querySelectorAll旧版浏览器中使用它的 Sizzle polyfill。

Answer 1

一种方法是使用.filter()方法：

$('element').filter(function() {
    return $.grep(this.attributes, function(value) {
       return value.nodeName.indexOf('data') === 0;
    }).length;
});

http://jsfiddle.net/QACsw/

Answer 2

这可能有点矫枉过正，但您可以编写一个自定义选择器：

$.expr[':'].attr = function (elem, index, regex_str) {
    var regex = new RegExp(regex_str[3]);

    for (var i = 0; i < elem.attributes.length; i++) {
        if (elem.attributes[i].name.match(regex)) {
            return true;
        }
    }

    return false;
};

演示：http: //jsfiddle.net/LBHwr/

所以在你的情况下，你会这样做：

$('div:attr(^data)') // starts with
$('div:attr(foo$)')  // ends with

它有点类似于常规的属性选择器语法。