jQueryのnot()メソッドで複数の要素を指定しフィルタする方法

  • 更新日:
  • 公開日:

jQueryのnot()メソッドで特定の要素をフィルタできるのですが、これの複数指定についてのメモになります。

not()メソッドでフィルタする

今まで以下のようにnot()メソッドを何回も繋げて複数の要素をフィルタしていました。

$('a[href^=#]').not('#second a').not('#third a').not('#fourth a').not('#fifth a').click(function() {
    //処理
});

これでも複数の要素をフィルタできますが、しかし冗長的に見えて嫌だったんですね。

それで、今回は以下のような書き方でも可能なことを知りました。

// 除外するセレクタをカンマ区切りの文字列で用意
var notList = '#second a, #third a, #fourth a, #fifth a';

// not()メソッドで該当セレクタから除外する
$('a[href^=#]').not(notList).click(function() {
    //処理
});

jQueryはラッパー内にセレクタをカンマで区切って複数指定できます。このように、配列みたいに複数のセレクタを文字列で変数へ格納し、not()メソッドの引数として渡すワケです。

変数の分だけメモリ喰うとか、実はメソッド使いまくった方が動作軽かったりするんじゃないかとか、検証はしてないのでどっちの方法がベストプラクティスなのかは分からないのですが。見た目が好みなので後者の方法でフィルタしています。

ちなみに:not()セレクタでの複数要素のフィルタ方法はこちらの記事が参考になります。

jQuery の :not() セレクタで複数のフィルタを指定する方法 | netplanetes日記

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone