ywork2020.com

Title

要素群から要素を除外する

目次 (INDEX)

notとは

ここで説明する not とは次の語句からなるjQueryのメソッドです。
not
読み: ノット
意味: 否定の意。 ～ではない。

目次に戻る

notメソッドの概要

このメソッドは、jQueryオブジェクトとして取得した要素群から、メソッドの引数セレクターに該当する要素を除外します。

複数の除外条件がある場合は、notを下記のようにチェーンメソッドとして使用することもできます。

$(セレクター).not(除外A).not(除外B);

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

var element = $(Selector).not(otherThanThis);

目次に戻る

サンプルコードと実行結果

ここでは、6つの div要素を題材にします。

この要素らには、class属性を付けており、その値により背景色を style で設定しています。

jQueryではセレクターでdiv要素を取得した後、notメソッドを使って class="clsBlue" の要素を除外してから cssメソッドでスタイルを変更しています。

サンプルコード: CSS 
<style>
	div{
		display: inline-block;
		color: ##white;
		font-size: 130%;
		margin: 2px;
		height: 50px;
		width: 50px;
		text-align: center;
	}
	.clsRed{
		background-color: ##red;
	}
	.clsGreen{
		background-color: ##green;
	}
	.clsBlue{
		background-color: ##blue;
	}
</style>
  • 02-10: div (要素の基本スタイルを設定しています。)
  • 11-13: .clsRed (このclass属性をもつ要素の背景色を赤にします。)
  • 14-16: .clsGreen (このclass属性をもつ要素の背景色を緑にします。)
  • 17-19: .clsBlue (このclass属性をもつ要素の背景色を青にします。)
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div class ="clsRed">R</div>
	<div class ="clsGreen">G</div>
	<div class ="clsBlue">B</div>
	<div class ="clsRed">R</div>
	<div class ="clsGreen">G</div>
	<div class ="clsBlue">B</div>
	<br>
	<button id="idButton">Select a div that is not blue.</button>
	<script>...</script>
</body>
  • 06 ~ 11: div (6つのdiv要素です。各要素にはclass属性を付けています。)
  • 12: br (キャリッジリターンを生成します。改行のことです。)
  • 13: button (ボタンです。クリックすることでscriptの02 ~ 04行のコードが実行されます。)
サンプルコード: script 
<script>
	$("#idButton").click(function(){
		$("div").not(".clsBlue").css("background-color", "##gray");
	});
</script>
  • 03: $("div").not(".clsBlue") (div要素であり、かつ .clsBlue 以外の要素の意味になります。)
実行結果:
R
G
B
R
G
B

目次に戻る