.not()

マッチした要素集合から指定したセレクターや条件を満たす要素を除外します。

.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>

 Back to top

© 2010 - 2017 STUDIO KINGDOM