セレクタ

今回はセレクタをやります。

基本

セレクタは$(" ・・・ ")の・・・の部分に記述し、編集、参照したい要素を指定します。

対象	記述
id	$("#id")
要素	$("要素")
class	$(".class")
属性	$("[属性名='属性']")

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		var id = $("#test1").val();
		var name = $("[name='test2']").val();
		var cls = $(".test3").val();
		var ele = $("input").val();
		$("#test2").html(id + "-" + name + "-" + cls + "-" + ele);
	});
</script>
</head>
<body>
	<input id="test1" name="test2" class="test3"  type="text" value="テキスト" />
	<br />
	<br />
	<div id="test2"></div>
</body>
</html>

実行するとすべて「テキスト」という文字列が取得されます。

属性指定の応用

属性は色々な指定ができます。

記述	説明
$("[属性名^='属性']")	前方一致
$("[属性名$='属性']")	後方一致
$("[属性名*='属性']")	部分一致
$("要素名[属性名='属性']")	要素も指定

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		var str = "";
		$("[value ^= 'a']").each(function(i, ele) {
		    str += "a:" + i + ":" + $(ele).val() + "<br />";
		});
		str += "<br />";

		$("[value $= 'f']").each(function(i, ele) {
		    str += "b:" + i + ":" + $(ele).val() + "<br />";
		});
		str += "<br />";

		$("[value *= 'f']").each(function(i, ele) {
		    str += "c:" + i + ":" + $(ele).val() + "<br />";
		});
		str += "<br />";

		$("input[value='jkl']").each(function(i, ele) {
		    str += "d:" + i + ":" + $(ele).val() + "<br />";
		});
		$("#div1").html(str);
	});
</script>
</head>
<body>
	<input id="test1" type="text" value="abc" />
	<input id="test2" type="text" value="def" />
	<input id="test3" type="text" value="ghi" />
	<input id="test4" type="text" value="jkl" />
	<br />
	<br />
	<div id= "div1">
	</div>
</body>
</html>

複数指定

複数のセレクタの関連でマッチさせることもできます。

記述	説明
$("セレクタ１,セレクタ２")	カンマで区切った場合、いずれかにマッチ(OR条件)。
$("セレクタ１セレクタ２")	スペースで区切った場合、親子関係の指定になります。セレクタ１の中のセレクタ２にマッチします。
$("セレクタ１ > セレクタ２")	大なり記号の場合も親子関係の指定になりますが、セレクタ１の直下のセレクタ２にマッチします。
$("セレクタ１ + セレクタ２")	プラス記号の場合、前後関係の指定になります。セレクタ１がマッチした以降からセレクタ２を探します。

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		var str = "";
		$("#test1,#test2").each(function(i, ele) {
		    str += "a:" + i + ":" + $(ele).val() + "<br />";
		});
		str += "<br />";

		$("#div1 [type='text']").each(function(i, ele) {
		    str += "b:" + i + ":" + $(ele).val() + "<br />";
		});
		str += "<br />";

		$("#div1 > [type='text']").each(function(i, ele) {
		    str += "c:" + i + ":" + $(ele).val() + "<br />";
		});
		str += "<br />";

		$("#test2 + [type='text']").each(function(i, ele) {
		    str += "d:" + i + ":" + $(ele).val() + "<br />";
		});
		$("#div3").html(str);
	});
</script>
</head>
<body>
	<div id= "div1">
		<input id="test1" type="text" value="テキスト１" />
		<input id="test2" type="text" value="テキスト２" />
		<input id="test3" type="text" value="テキスト３" />
		<div id= "div2">
			<input id="test4" type="text" value="テキスト４" />
		</div>
		<br />
		<div id= "div3">
		</div>
	</div>
</body>
</html>

処理結果

				

a:0:テキスト１
a:1:テキスト２

b:0:テキスト１
b:1:テキスト２
b:2:テキスト３
b:3:テキスト４

c:0:テキスト１
c:1:テキスト２
c:2:テキスト３

d:0:テキスト３

指定要素配下を取得

指定要素配下を取得するにはfindメソッドを使います。
下の例では、指定要素の下にある要素の中からidがあるものを抜き出します。

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script>
		$(function() {
			$('#div1').find('input').each(function() {
				if ($(this).attr("id")) {
					console.log($(this).attr("id") + "-" + $(this).val());
				}
			});
		});
	</script>
</head>

<body>
	<div id="div1">
		<input id="test1" type="text" value="テキスト１" />
		<input id="test2" type="text" value="テキスト２" />
		<input type="button" value="実行" />
		<div id="div2">
			<input id="test4" type="text" value="テキスト４" />
		</div>
		<br />
	</div>
	<div id="div3">
		<input id="test5" type="text" value="テキスト５" />
	</div>
</body>

</html>

処理結果

				
test1-テキスト１
test2-テキスト２
test4-テキスト４

親子、兄弟要素を取得

親子、兄弟要素を取得するには、parent、children、prev、nextメソッドなどを使います。
下の例ではテーブルの中にボタンを置き、同じ行の別セルを取得しています。

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script>
		function exe(btn) {
			alert($(btn).parent().prev(".cls").text());
		}
	</script>
</head>

<body>
	<table>
		<tr>
			<td class="cls">testA</td>
			<td><input type="button" onclick="exe(this)" value="実行"></td>
		</tr>
		<tr>
			<td class="cls">testB</td>
			<td><input type="button" onclick="exe(this)" value="実行"></td>
		</tr>
	</table>
</body>

</html>

指定	説明
要素.prev('要素指定')	兄弟要素で自分より前にある要素を取得
要素.next('要素指定')	兄弟要素で自分より後にある要素を取得
要素.parent()	親要素を取得
要素.parents('要素指定')	自分より上にある要素を取得
要素.children('要素指定')	直属の子要素を取得
要素.find('要素指定')	自分より下にある要素を取得

指定要素の存在確認

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script>
		$(function() {
			if ($('#test1').length) {
				console.log("存在する");
			} else {
				console.log("存在しない");
			}
		});
	</script>
</head>

<body>
	<input id="test1" type="text" value="テキスト１" />
</body>

</html>

処理結果

				
存在する

ページのトップへ戻る