web-dev-qa-db-ja.com

.data（）キー/値に基づいてフィルター要素

クラス_.navlink_を持つ4つのdiv要素があり、クリックすると、.data()を使用して_'selected'_というキーをtrueの値に設定するとします。

_$('.navlink')click(function() { $(this).data('selected', true); })
_

新しい_.navlink_がクリックされるたびに、後で操作するために以前に選択したnavlinkを保存したいと思います。 .data()を使用して保存された内容に基づいて要素を選択する迅速で簡単な方法はありますか？

法案に合うjQuery ：filtersはないようで、次の（同じクリックイベント内で）を試しましたが、何らかの理由で機能しません。

_var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);
_

私はこれを達成する他の方法があることを知っていますが、現時点では、.data()を介してそれを行うことができるかどうかに興味があります。

jqueryfilter
112
user113716

フィルタは機能しますが、フィルタに渡された関数内の一致するオブジェクトでtrueを返して、それらを取得する必要があります。

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});
179
BaroqueBobcat

記録のために、can jqueryを使用してデータをフィルター処理します（この質問はかなり古く、jQueryはそれ以降に進化したため、このソリューションも同様に記述できます）。

_$('.navlink[data-selected="true"]');
_

または、より良い（パフォーマンス用）：

_$('.navlink').filter('[data-selected="true"]');
_

または、_data-selected_が設定されたすべての要素を取得する場合：

_$('[data-selected]')
_

注このメソッドは、html属性を介して設定されたデータでのみ機能します。 .data()呼び出しでデータを設定または変更すると、このメソッドは機能しなくなります。

133
StefanoP

プラグインは非常に簡単に作成できます。

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

使用法（ラジオボタンをチェック）：

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);
13
mpen

私が気づいた2つのこと（それらはあなたがそれを書き留めたときからの間違いかもしれません）。

  1. 最初の例でドットを逃した（$('.navlink').click）
  2. フィルターが機能するには、値を返す必要があります（return $(this).data("selected")==true）
8
Thomas