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

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

是否存在用于匹配属性名称子串的现有或即将出现的CSS3选择器？

2 个答案: