3

で始まる属性を持つすべての要素を選択したいdata-something-

例えば

<span data-something-random="test">span 1</span>
<span data-nope="nope">span 2</span>
<span data-something-else="another test">span 3</span>

上記の例から、スパン 1 とスパン 3 を選択します。

私はもう試した

$('*[$data-validate]')

しかし、うまくいきませんでした。

疑似セレクターの代わりに jQuery メソッドを使用する別の方法も歓迎します。

4

5 に答える 5

4

私はお勧めします：

$('*').filter(
    function(){
        var that = $(this),
            data = that.data();
        for (var a in data){
            if (data.hasOwnProperty(a)){
                return /^something/.test(a);
            }
        }
    }).css('color','red');

JS フィドルのデモ。

同じことを実現する単純な jQuery プラグインを提供するように編集され、正規表現を渡す必要があります。

$.fn.hasAttrMatching = function (expr) {
    var reg, data;
    if (!expr) {
        return this;
    } else {
        if (typeof expr === 'string') {
            reg = new RegExp(expr);
        } else if (typeof expr === 'object' && expr.test) {
            reg = expr;
        }
        return this.filter(function () {
            data = $(this).data();
            for (var a in data) {
                if (data.hasOwnProperty(a)) {
                    return reg.test(a);
                }
            }
        });
    }
};

JS フィドルのデモ。

これは、リテラル正規表現を使用して次のように呼び出すことができます。

$('body, body *').hasAttrMatching(/^something/).css('color', 'red');

正規表現の文字列表現を使用する:

$('body, body *').hasAttrMatching('^something').css('color', 'red');

この時点で、いくらか思い出していただけると思いますが、(正規表現リテラルまたは文字列として) 式が渡されない場合、フィルタリングは行われず、プラグインは受け取ったのと同じ要素を返します。

$('body, body *').hasAttrMatching().css('color', 'red');

リンクされたデモでわかるように、元のセレクターに一致するすべての要素に色を付けます。

参考文献:

于 2013-03-31T11:46:23.410 に答える
3

そのように属性を選択することはできません。左側は完全な属性である必要があり、その内容を照会するには $= のみを使用できます。参考までに * は不要です。

$('[data-something-random^=te]')

必要に応じて、両方の属性を選択して一緒に追加できます。

$('[data-something-random]').add('[data-something-else]');

あなたがやりたいことをすることは可能ですが、jQueryですぐに使えるサポートがあるとは思いません。より良い解決策は、おそらく要素にクラスまたはその他の属性を追加してチェックすることです。

jsフィドル

于 2013-03-31T11:47:41.210 に答える
3

これを試して：

// Get all the apan's that starts with data-something
var $span = $('span').filter(function(index){
    var data = $(this).data();
    if (!$.isEmptyObject(data)) {
        var result = false;
        $.each(data, function (key, value) {              
            result = (key.search(/^something/) != -1);
        });
        return result;
    }
    else return false;
});

// Work with the two span's for above example
$span.each(function () {

   // Your code goes here...
})

デモはこちら

于 2013-03-31T11:49:52.753 に答える
0

jQuery でセレクター機能を拡張できます。

$.extend($.expr[":"], {
    withAttrLike: function(elem, _, m) {
        var attrs = elem.attributes, pattern = new RegExp(m[3]);
        for (var i = 0; i < attrs.length; ++i)
            if (pattern.test(attrs[i].name))
                return true;
        return false;
    }
});

これで、次のように記述できます。

$("div:withAttrLike('^data-something')").hide();

新しいセレクター式の「引数」は正規表現です。やや不可解ですが、それはセレクターの実装で次のように利用できますm[3]（これは、Sizzle の内臓でセレクター式を解析する正規表現一致の結果だと思います）。コードは正規表現をインスタンス化し、それを使用して属性名をテストします。

于 2015-02-16T17:02:12.560 に答える
-1

データ属性名だけでは選択できないため (左側にあるため)、考えられるアプローチの 1 つはname、スパンに属性を追加してデータ属性を論理的にグループ化し、name属性によって選択することです。

HTML:

<span name=data-something-group data-something-random="test">span 1</span>
<span name=data-nope data-nope="nope">span 2</span>
<span name=data-something-group data-something-else="again">span 3</span>

jQuery:

 $('[name^="data-something-group"])
于 2013-03-31T11:47:56.980 に答える