javascript - 属性名の部分文字列を一致させるための既存または今後の CSS3 セレクターはありますか?

Question

で始まる値を持つ[foo^="bar"]属性を持つノードを一致させることができます。foobar

特定の文字列で始まる属性名を持つノードを一致させる方法はありますか? これの使用例は、すべてのノードをdata-*属性と一致させることです。

編集:これを試みている理由は、これらの属性を探しているすべてのノードを反復処理することを避けるためです (パフォーマンス上の理由から)。私はquerySelectorAll古いブラウザ用の Sizzle polyfill を使用していました。

Answer 1

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

これは、通常の属性セレクター構文に多少似ています。