jQueryにて指定した要素を検索条件から除外するnot()の利用方法
あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメソッドが見受けられた。内容的には同一のclassが複数あり、クリックされた際にその部分のみ表示、それ以外は非表示といったもの。全てのclassを非表示後、特定部分のみ表示すればいいのではと思ったがCSSとの絡みでnot()を使っているっぽい。以下に使い方をメモ。
利用方法
ソースコード
<style> .active{ color: #f00; } </style> <ul> <li class="list">リスト1</li> <li class="list">リスト2</li> <li class="list">リスト3</li> <li class="list">リスト4</li> <li class="list">リスト5</li> </ul> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function(){ $(`.list`).on(`click`, function(){ //クリックされた部分以外は.activeを削除 $(`.list`).not(this).removeClass(`active`); //クリックされた部分に.activeを追加 $(this).addClass(`active`); }); }); </script>
その他
上記は簡単なもののためnot()を使うまでもないと思うが、実際のソースコードだとactive追加・削除時にCSS及びjQueryでアニメーション的な効果が入っていたため、恐らく.listから.activeを全削除→クリックされた部分に.activeを追加とすると見た目的によろしくないっぽく、そのためnot()を使われていたんだと思われる。
not()の逆はfilter()
not()は検索条件から除外するというものだが、反対に検索条件に含めるというような場合はfilter()メソッドを使うみたい。
ただ、普通にセレクタで指定すれば良いと思うのでこちらはあまり使い道が無さそう。
リファレンス
.not()
.filter()
https://api.jquery.com/filter/
所感
タブ切り替えとかでよくあるパターンだが、よくよく考えるとclickした部分も含めて全て非表示とするよりも、clickした部分は除いて非表示にした方が間違いは無さそう(CSSとか見た目の問題)。
そのため今後はこちらの形を使っていきたいところ。
関連記事
-
-
IE11でフォーム送信時に二重登録される
Internet Explorer11でform送信時にデータが二重登録されると ...
-
-
Ajaxで負荷軽減
業務中、専用のページでfile_get_contents的なものは あまり使わな ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
jQueryのfind実行時に複数のセレクタを指定する方法
jQueryのfind()実行時に複数のセレクタを指定したい。 <div ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...