デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:not( )指定した要素を除外

構文

セレクタで指定した要素を除外
$(":not(セレクタ)")ver1.0〜
※:(コロン)を忘れないように注意しましょう
※セレクタにインデックス番号は指定できません。

機能

:(コロン)に続けてnotを設定し、引数としてセレクタを指定すると指定したセレクタ「以外」の要素を選択します。また:not( )は:eq( )と異なり引数にインデックス番号を設定できないことに注意してください。

解説

対象を選択から除外します

サンプル(not/01.html)を開いてbody内にdiv要素が4つあることを確認してください。1番目のdivにはclass属性でsampleと設定され、3番目のdivにはclass属性でtestと設定されています。

jQueryには以下の様に記述され、複数のセレクタ(and)を利用してdiv要素と組みあわせました。そのためbuttonをクリックするとdivのうちclass属性がsampleの要素を除外するようにしています。選択した要素はcssメソッドを利用して背景色を緑にします。

$("button").click(function(){
	$("div:not(.sample)").ccss("background-color","#9f9");
});

結果として、buttonをクリックすると1番上の(class属性がsampleの)div要素以外が選択されます。

インデックス番号は利用できません

:not( )は:eq( )と関連して引数にインデックス番号を設定できそうな雰囲気がありますが、実際はできません。サンプル(not/01b.html)を開いて、jQueryのセレクタ部分が以下の様に「0」に変更されていることを確認してください。

$("button").click(function(){
	$("div:not(0)").css("background-color","#9f9");
});

上記のように:not()の引数にインデックス番号のつもりで0と指定しても、それはセレクタと見なされます。そのため正常には機能せず、何も除外されないため全てのdiv要素が選択されます。

もし0番目の要素以外を選択したい場合は、サンプル(not/02.html)の様に引数の部分に:eq( )を利用してインデックス番号を指定します。

$("button").click(function(){
	$("div:not(:eq(0))").css("background-color","#9f9");
});