.not()
マッチした要素集合から指定したセレクターや条件を満たす要素を除外します。
- .not( selector ) 1.0追加
- .not( elements ) 1.0追加
- .not( function(index) ) 1.4追加
- .not( jQuery object ) 1.4追加
- 補足事項
- デモ
.not( selector ) 1.0追加
戻り値:jQuery
除外する要素をセレクタで指定します。
引数 | 説明 |
---|---|
selector | ここに指定したセレクタにマッチした要素が除外されます。 |
.not( elements ) 1.0追加
戻り値:jQuery
除外する要素をDOM要素で指定します。
引数 | 説明 |
---|---|
elements | ここに指定した要素にマッチした要素が除外されます。 |
.not( function(index) ) 1.4追加
戻り値:jQuery
除外する要素を関数で指定します。
引数 | 説明 |
---|---|
function(index) | マッチしている各要素に対して関数を実行し、戻り値がfalseであれば除外し、trueであれば残します。 関数内で各要素はthisで参照可能です。 |
.not( jQuery object ) 1.4追加
戻り値:jQuery
除外する要素をjQueryオブジェクトで指定します。
引数 | 説明 |
---|---|
jQuery object | ここに指定したjQuery Objectにマッチした要素が除外されます。 |
補足事項
次のようなコードがあった場合、
<ul>
<li>リスト 項目 1</li>
<li>リスト 項目 2</li>
<li>リスト 項目 3</li>
<li>リスト 項目 4</li>
<li>リスト 項目 5</li>
</ul>
次の処理を実行すると、リスト項目2,4の背景色が赤くなります。 (インデクッス番号は0始まりのため、リスト項目1,3,5が偶数番目となり、 それをnotで除外しているため)
$('li').not(':even').css('background-color', 'red');
デモ
クラス名がgreenでは無い、且つIDがblueoneでも無い要素のボーダーを赤に変更しています。
<!DOCTYPE html>
<html>
<head>
<style>
div { width:50px; height:50px; margin:5px; float:left;
background:yellow; border:2px solid white; }
.green { background:#8f8; }
.gray { background:#ccc; }
#blueone { background:#99f; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div id="blueone"></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="gray"></div>
<div></div>
<script>
$("div").not(".green, #blueone")
.css("border-color", "red");
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM