jQueryで特定の要素を除いて処理をさせる場合はnot()を使うと便利です。奇数を除いて偶数の要素にのみ色を付けたり、選択した要素以外に処理を設定することも可能です。
メソッドタイプのnot()とセレクタに指定する:not()も併せてご紹介します。
not()の使い方
通常のメソッド同様、ドットで繋ぎ引数に除外したい要素を指定します。
特定の要素を除く
まずはインデックスが奇数の要素を除外し、偶数のインデックスのみ処理します。（インデックスは0から数えます）
jQuery
|
1 2 |
// 奇数の要素を除く $('li').not(':odd').css('color', 'red'); |
結果
以下のようにインデックスが奇数の要素を除外し、偶数の要素のみテキストが赤くなったかと思います。
（インデックスは0から数えるため、下記の例だとリスト00は0、つまり偶数になります）
- リスト00
- リスト01
- リスト02
- リスト03
構文
not()は以下のような構文になります。
$( セレクタ ).not( 除外する要素 ( , 除外する要素…) )
引数はカンマ区切りで複数の指定にも対応します。
複数の要素を除く
not()は複数指定することもできます。
以下ではnot()で指定したID以外の要素の背景を赤にします。
jQuery
|
1 2 |
// 特定のIDを複数除く $('p').not('#text02, #text04').css('background', 'red'); |
結果
以下のように指定したIDの要素を除外し、背景が赤くなったかと思います。
テキスト01
テキスト02
テキスト03
テキスト04
テキスト05
自要素を除く
thisを使い自要素を除外することもできます。
以下ではマウスを乗せた要素以外は字消しします。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 自要素以外に反映 // マウスを乗せた際のイベント $('p').hover(function() { // 自要素以外に字消しのCSSを適用 $('p').not(this).stop().css('textDecoration', 'line-through'); // マウスを離した際のイベント }, function() { // 字消のCSSを取り消す $('p').not(this).stop().css('textDecoration', 'none'); }); |
結果（動作サンプル）
以下テキストにマウスを乗せると、そのテキスト以外が字消しされるかと思います。
テキスト01
テキスト02
テキスト03
:not()の使い方
上記でご紹介したnot()に似ていますが、:not()はセレクタで指定します。
：(セミコロン)が頭に付きます。
セレクタで除外
以下ではインデックスが偶数の要素を除外し、奇数のインデックスのみ処理します。（インデックスは0から数えます）
jQuery
|
1 2 |
// セレクタで偶数を除外 $('p:not(:even)').css('color', 'red'); |
結果
以下のようにインデックスが偶数の要素を除外し、奇数の要素のみテキストが赤くなったかと思います。
テキスト00
テキスト01
テキスト02
テキスト03
テキスト04
構文
:not()は以下のような構文になります。
$( セレクタ:( 除外するセレクタ ) )
対象のセレクタに続けて除外するセレクタを指定します。
:not()はインデックス番号は指定できないため、何番目の要素という風に順番で指定したい場合は前述のnot()を使いましょう。
セレクタで指定の順番を除外
セレクタで指定する:not()は順番を指定することができないため:eq()で順番を指定して除外することで対応できます。
以下ではインデックスが0以外のテキストを赤色にします。
jQuery
|
1 2 |
// セレクタで指定の順番を除外 $('li:not(:eq(0))').css('color', 'red'); |
結果
以下のようにインデックスが0の要素を除外し、それ以外のテキストが赤色になったかと思います。
テキスト00
テキスト01
テキスト02
セレクタで特定の子要素を持つ要素を除く
:has()で特定の子要素を指定して、その子要素を持つ要素を除外することもできます。
以下では<span>で囲われたリスト以外のテキストを赤色にします。
jQuery
|
1 2 |
// 特定の子要素を持つ要素を除く $('ol li:not(:has(span))').css('color', 'red'); |
以下のように<span>で囲われたリスト02とリスト03を除外し、それ以外のテキストが赤色になったかと思います。
- リスト01
- リスト02
- リスト03
- リスト04
