こんにちは、ライターのマサトです！
今回は、jQueryで要素を除外した指定方法ができる「not()」と「:not()」の2種類を学習していきましょう！
この記事では、
・「not()」とは？
・基本的な使い方！
・「not()」でclass属性を指定する
という基本的な内容から、
・「not()」で複数の要素を指定しよう
・「not()」の逆は「hasClass()」？
・「:not()」でセレクタ指定する！
・属性プロパティを指定する！
などの応用的な使い方に関しても解説していきます。
この記事で、jQueryの「not() / :not()」をしっかり学習して自分のスキルアップを目指しましょう！
「not()」とは？
それでは、まず最初に「not()」メソッドについて基本的な知識から勉強を進めていきましょう！
「not()」は、指定した要素を除外してくれるメソッドになります。
つまり、指定した要素を対象外にしてくれるので、その要素以外を対象にすることが出来るのです。
例えば、次のようなHTMLがあると想定してください！
<p>サンプルテキスト</p> <p class="temp">テストテスト</p> <p>サンプルテキスト</p>
3つのp要素が配置されていますが、1つだけclass属性が付与されていますね。
p要素をすべて対象にしたいけどclass属性が付与されている要素だけは対象にしたくない！…といった時に「not()」は役立ちます！
HTMLタグや属性などを指定して特定の要素を除外できるので、活用すれば効率の良いプログラムが実現します。
本記事では、この「not()」メソッドについてさまざまな活用法を学習できるように構成しているので、ぜひ参考にしてみてください！
基本的な使い方！
ここからは、実際に「not()」メソッドを使いながらプログラミングの学習を進めましょう！
「not()」の記述方法は、【 対象要素.not( 除外する要素 ) 】のように引数へ除外したい要素をセレクタ指定すればOKです。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト１</p>
<a href="#">サンプルリンク１</a>
<p>サンプルテキスト２</p>
<a href="#">サンプルリンク２</a>
<p>サンプルテキスト３</p>
<script>
var r = $('p, a').not('a');
//すべてのp要素を出力する
r.each(function(value, element) {
console.log(element)
})
</script>
</body>
実行結果
<p>サンプルテキスト１</p> <p>サンプルテキスト２</p> <p>サンプルテキスト３</p>
この例では、3つのp要素とその間にa要素が配置されています。
そこで、「$(‘p, a’)」と記述することでp要素もa要素もすべて対象にできますよね？
しかし、「not(‘a’)」のようにnot()を実行することで「a要素」は除外されます。
結果的に、3つのp要素だけが対象になっているのが実行結果からも分かりますね。
「not()」でclass属性を指定する
今度は、「not()」を使ってclass属性を持つ要素を除外してみましょう！
考え方はこれまで一緒で、除外したいclass属性をnot()の引数に指定すれば実現します。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト１</p>
<p class="text">サンプルテキスト２</p>
<p>サンプルテキスト３</p>
<script>
var r = $('p').not('.text');
//すべてのp要素を出力する
r.each(function(value, element) {
console.log(element)
})
</script>
</body>
実行結果
<p>サンプルテキスト１</p> <p>サンプルテキスト３</p>
この例では、3つのp要素が配置されていますね。
「$(‘p’)」と記述することで、すべてのp要素が指定できるのですが「not(‘.text’)」と記述しています。
これにより、class属性値「text」が付与された要素は除外になるので、結果的に2つ目のp要素は除外されるというわけです。
実行結果を見ると、1つ目と3つ目のp要素だけが出力されていますね！
「not()」で複数の要素を指定しよう
「not()」を使う場合、除外したい要素が1つとは限りませんよね？
例えば、複数の要素を一度に除外したい場合にはどのように記述すれば良いのでしょうか。
次のようなHTMLがあると想定してみてください。
<ul>
<li id="first">リスト１</li>
<li class="text">リスト２</li>
<li>リスト３</li>
<li class="text">リスト４</li>
</ul>
この例では、リスト要素がいくつか配置されていますね。
例えば、id属性とclass属性を除外したい場合は、単純に考えると次のようになりそうです。
var r = $('li').not('#first').not('.text');
「not(‘#first’)」と記述してid属性を除外し、「not(‘.text’)」でclass属性を除外するわけです。
これでも目的は果たせるのですが、このように「not()」を連続して記述するのは効率の良い書き方とはいえません。
そこで、次のサンプル例を見てください！
<body>
<ul>
<li id="first">リスト１</li>
<li class="text">リスト２</li>
<li>リスト３</li>
<li class="text">リスト４</li>
</ul>
<script>
var r = $('li').not('#first, .text');
//すべてのli要素を出力する
r.each(function(value, element) {
console.log(element)
})
</script>
</body>
実行結果
<p>サンプルテキスト</p> <p>サンプルテキスト</p>
注目すべきは「not()」の記述方法です。
「not(‘#first, .text’)」のように、一度に複数の属性を指定することが出来ることを覚えておきましょう！
このように記述することで、複数のnot()を書く必要がなく効率の良いプログラムを実現できるわけです。
「not()」の逆は「hasClass()」？
「not()」メソッドの基本的な使い方を学習したところで、「hasClass()」についても勉強しておきましょう！
「not()」が指定した要素を除外するのに対して、「hasClass()」は指定したclass属性だけを対象にすることができます。
記述方法はこれまでと同じように【 要素.hasClass( class属性値 ) 】となり、対象にしたclass属性値を引数にとります。
例えば、class属性値「text」が付与されたp要素を指定したい場合は次のようになります。
$('p').hasClass('text');
注意するべきポイントは、「not()」と違って「hasClass()」は結果を「true / false」で返すところです。
つまり、指定したclass属性値を持つ要素があれば「true」、無ければ「false」を返すわけです。
そのため、指定した要素だけを出力するには次のように行います。
<body>
<ul>
<li id="first">リスト１</li>
<li class="text">リスト２</li>
<li>リスト３</li>
<li class="text">リスト４</li>
</ul>
<script>
$('li').each(function( index, element ) {
if( $(this).hasClass('text') ) {
console.log( element );
}
})
</script>
</body>
実行結果
<li class="text">リンク２</li> <li class="text">リンク４</li>
この例では、li要素を対象にして「each()」を使い1つずつli要素に処理を実行しています。
その処理というのが「hasClass(‘text’)」の記述であり、IF文によって「true」の時だけ要素を出力しています。
つまり、「hasClass()」を使ってclass属性値「text」を持つ要素だけを出力できているわけです。
「:not()」でセレクタ指定する！
これまでは「not()」メソッドについて学習をしてきました。
ここからは、同じ意味でよく使われる「:not()」についてご紹介しておきます！
この「not()」と「:not()」は意味的には同じなのですが、その使い方が大きく違うので混同しないように注意しましょう。
基本的な書き方の違いとして以下のようになります。
//「not()」の場合 対象要素.not( 除外したい要素 ); //「:not()」の場合 $( 対象要素 + 除外したい要素 );
「not()」はメソッドなので、対象要素の次に「.（ドット）」で連結して実行する必要があります。
反対に「:not()」は対象要素を決める時に、セレクタ指定と一緒に除外したい要素を指定するわけです。
この違いに注意しながら、基本的な使い方を見ていきましょう！
基本的な使い方！
「:not()」を使ったサンプル例として、任意のclass属性値を使った除外の方法を見てみましょう。
次のサンプル例を見てください！
<body>
<ul>
<li id="first">リンク１</li>
<li class="text">リンク２</li>
<li>リンク３</li>
<li class="text">リンク４</li>
</ul>
<script>
$('li:not(".text")').each(function( index, element ) {
console.log( element );
})
</script>
</body>
実行結果
<li id="first">リンク１</li> <li>リンク３</li>
この例では、いくつかの属性が付与されたリスト要素が配置されています。
そこで、「$(‘li:not(".text")’)」のように記述することでclass属性値「text」が付与された要素を除外することができます。
あとは「each()」ですべてのリスト要素を取得して出力するようにしています。
実行結果を見ると、2つ目と4つ目のリスト要素が除外されているのが分かりますね。
インデックス番号は指定できない？
セレクタ指定において「:not()」は要素のインデックス番号を指定できない点に注意しましょう。
インデックス番号というのは、簡単に言うと同じ要素の「数」と考えてください。
例えば、以下のようなHTMLを想定してみましょう。
<p>サンプルテキスト１</p> <p>サンプルテキスト２</p> <p>サンプルテキスト３</p>
p要素が3つ配置されていますが、この場合インデックス番号は0〜2までとなります。
つまり、インデックス番号「0」は1つ目のp要素を指しているわけです。
そこで、0番目のp要素を除外したければ次のように書くことを考えるでしょう。
$( 'p:not(0)' );
しかし、このように記述しても0番目の要素を指定することはできません。
そこで、インデックス番号を利用したい場合はjQueryで用意されている「:eq()」を別途使う必要があります。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト１</p>
<p>サンプルテキスト２</p>
<p>サンプルテキスト３</p>
<script>
var r = $('p:not(:eq(0))');
//すべてのp要素を出力する
r.each(function(index, element) {
console.log(element);
})
</script>
</body>
実行結果
<p>サンプルテキスト</p> <p>サンプルテキスト</p>
この例では、先ほどのHTMLに対して「:eq()」を使ったインデックス番号の指定を行っています。
「:not()」の引数に直接挿入して「p:not(:eq(0))」のように記述するわけです。
これにより、0番目のp要素が除外されているのが実行結果からも分かりますね！
属性プロパティを指定する！
最後に、「:not()」を使った属性プロパティの指定方法を見ていきましょう！
一般的に「:not()」でよく使われるのが属性プロパティなのですが、なかでも「disabled」「checked」は特に頻度が高いです。
そこで、それぞれの使い方を解説しておきますので、ぜひ参考にしてみてください！
「disabled」の場合
まずは「disabled」の使い方から見ていきましょう！
「disabled」を付与された要素は「無効化」されるので、フォームの場合だとサーバーへ送信されない要素となります。
そこで、無効化された要素を除外するようなケースで「:not()」は役に立つでしょう。
次のサンプル例を見てください！
<body>
<input type="text" value="おはよう">
<input type="text" value="こんにちは" disabled>
<script>
var r = $('input:not(:disabled)');
//すべてのinput要素を出力する
r.each(function( index, element ) {
console.log( element );
})
</script>
</body>
実行結果
<input type="text" value="おはよう">
この例では、2つのinput要素が配置されており、片方は「disabled」属性が付与されていますね。
そこで、「input:not(:disabled)」のように記述することで、disabled属性が付与されたinput要素を除外する指定ができます。
「each()」を使ってすべてのinput要素を出力していますが、2つ目のinput要素は出力されていないのが分かりますね！
「checked」の場合
次に、「checked」属性の指定を見てみましょう！
「checked」はその名の通りチェックボックスのボタンに使われる属性プロパティで、チェックされたかどうかを意味しています。
「:not()」による「checked」の指定方法は同様なので、考え方は先ほどと同じです。
次のサンプル例を見てください！
<body>
<input type="checkbox" value="apple">リンゴ
<input type="checkbox" value="banana" checked>バナン
<input type="checkbox" value="melon">メロン
<script>
var r = $('input:not(:checked)');
//すべてのinput要素を出力する
r.each(function( index, element ) {
console.log( element );
})
</script>
</body>
実行結果
<input type="checkbox" value="apple"> <input type="checkbox" value="melon">
この例では、3つのinput要素（checkbox）が配置されており、1つだけ「checked」が指定されていますね。
そこで、「input:not(:checked)」のように記述することで「checked」が指定されたinput要素を除外することが可能です。
結果を見ると、しっかりと2つ目のinput要素が除外されているのが分かりますね！
まとめ
今回は、jQueryで要素を除外できる「not()」と「:not()」を勉強しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・「not()」の引数にタグや属性を指定することで任意の要素を除外できる
・「:not()」はセレクタ指定内で利用でき、「not()」とほぼ同じ使い方ができる
・「:not()」でインデックス番号を利用するには「:eq()」を使う
上記内容を踏まえて、ぜひ自分のプログラムにも活用できるように勉強を頑張っていきましょう！
