ywork2020.com

Title

セレクターに一致するかを判定する

目次 (INDEX)

isとは

ここで説明するis とは次の語句からなるjQueryのメソッドです。
is
読み: イズ
意味: be動詞の三人称単数現在形、～です。

目次に戻る

isメソッドの概要

このメソッドは、セレクターに指定した要素が引数セレクターにマッチしているかを真偽値で返します。

目次に戻る

構文

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

var boolean = $(Selector).is(matchingSelector);

目次に戻る

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

ここでは3つのdiv要素が題材です。

各要素には class 属性を付けています。

この要素らをisメソッドの引数にあたる「マッチングセレクター」を使って class の値が一致するか判定します。 判定結果が一致すれば背景色をライトピンクに設定します。 判定結果が一致しなければ背景色をライトブルーに設定します。

サンプルコード: CSS 
<style>
	div{
		border: thin solid ##lightgray;
		margin: 1em;
		padding: 1em;
	}
</style>
  • 03: border (境界線を設定しています。 細線、実線、ライトグレー)
  • 04: margin (境界線から外周の余白を設定しています。 1文字分の高さで余白をとります。)
  • 05: padding (境界線から内周の余白を設定しています。 1文字分の高さで余白をとります。)
サンプルコード: HTML 
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div class ="clsNo">Element DIV</div>
	<div class ="clsYes">Element DIV</div>
	<div class ="clsNo">Element DIV</div>
</body>
  • 05, 07: div (div要素です。class属性の値を "clsNo" に設定しています。)
  • 06: div (div要素です。class属性の値を "clsYes" に設定しています。)
サンプルコード: script 
<script>
	$("div").each(function(){
		if($(this).is(".clsYes") == true){
			$(this).css({"background-color" : "##lightpink"});
		}
		else{
			$(this).css({"background-color" : "##lightblue"});
		}
	});
</script>
  • 02-09: each(function(){some processing}) (各div要素に対して1回ずつ関数を実行します。)
  • 03: if($(this).is(".clsYes") == true) (thisは、この場合「div」のことを指しています。つまり、この等価式では、divはclass="clsYes"であるかという問いを行っており、その結果が true であるならば...という意味になります。)
  • 04: css() (03: の結果が true であれば実行されます。cssメソッドはスタイルを適用します。)
  • 07: css() (03: の結果が true 以外であれば実行されます。cssメソッドはスタイルを適用します。)
実行結果:
Element DIV
Element DIV
Element DIV

目次に戻る