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()
セレクタでの複数要素のフィルタ方法はこちらの記事が参考になります。