22

javascript (特に jQuery) を使用して、部分的な属性名に基づいて要素を見つける方法はありますか?

これらのリンクで参照されている部分的な属性値を見つけるセレクターは探していません。

しかし、より多くの線に沿った何か

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

と

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

「data-api」で始まる属性を持つ要素を検索します。

4

2 に答える 2

10

これは、候補を属性.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/

于 2012-08-30T15:09:53.370 に答える
7

何を探しているのかわかりませんが、これを書くのに数分を費やしました：

$.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-*それを拡張および変更して、より多くのオプションなどを含めることができますが、現在はデータ属性のみを検索し、「で始まる」のみに一致しますが、少なくとも使いやすいです?

フィドル

于 2012-08-30T14:59:08.377 に答える