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()

https://api.jquery.com/not/

.filter()

https://api.jquery.com/filter/

所感

タブ切り替えとかでよくあるパターンだが、よくよく考えるとclickした部分も含めて全て非表示とするよりも、clickした部分は除いて非表示にした方が間違いは無さそう(CSSとか見た目の問題)。

そのため今後はこちらの形を使っていきたいところ。