jQueryのnotの逆は？

jQueryで特定の要素を除外して操作したい場合、「not()」メソッドが便利です。しかし、「not()」の逆、つまり除外した要素を選択したい場合はどうすれば良いのでしょうか？今回は、「not()」の使い方を復習しながら、その逆を実現する方法を解説していきます。

「not()」とは？

「not()」は、jQueryで要素の集合から特定の条件に一致しない要素を抽出するためのメソッドです。引数には、セレクタ、要素、配列などを指定することができます。

例えば、以下のようなHTML構造があるとします。


<ul>
  <li class="item">項目1</li>
  <li class="item">項目2</li>
  <li class="item special">項目3</li>
  <li class="item">項目4</li>
</ul>

このHTMLから、「class="special"を持つli要素以外」を選択したい場合は、以下のように記述します。


$('li.item').not('.special').css('color', 'red');

このコードを実行すると、「項目1」、「項目2」、「項目4」の文字色が赤くなります。

「not()」では、カンマ区切りで複数のセレクタを指定することも可能です。例えば、「class="special"と"id="target""を持つli要素以外」を選択したい場合は、以下のように記述します。


$('li.item').not('.special, #target').css('background-color', 'yellow');

では、「not()」の逆、つまり除外した要素を選択したい場合はどのようにすれば良いのでしょうか？答えは、「hasClass()」や「is()」などのメソッドを組み合わせることです。

例えば、先ほどのHTMLで「class="special"を持つli要素」を選択したい場合は、以下のように記述します。


$('li.item').hasClass('special').css('font-weight', 'bold');

このコードでは、「hasClass('special')」で「class="special"を持つ要素」を絞り込んでいます。

今回は、「not()」とその逆の操作について解説しました。「not()」は特定の要素を除外する際に便利ですが、その逆を実現するには「hasClass()」などのメソッドを組み合わせる必要があります。状況に応じて使い分けていきましょう。

<a href="https://api.jquery.com/not/">jQuery.not() | jQuery API Documentation</a>
<a href="https://api.jquery.com/hasclass/">jQuery.hasClass() | jQuery API Documentation</a>

質問	回答
「not()」と「:not()」の違いは？	「not()」はメソッド、「:not()」はセレクタです。機能はほぼ同じですが、「:not()」の方が簡潔に記述できる場合があります。
「not()」は複数のクラスを指定できますか？	はい、カンマ区切りで複数のクラスを指定できます。
「not()」で要素の属性を指定することはできますか？	はい、属性セレクタを使用することで要素の属性を指定できます。

その他の参考記事:jquery eq 取得