トッカンソフトウェア

セレクタ

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


基本

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

対象 記述
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>


			

複数指定

複数のセレクタの関連でマッチさせることもできます。
記述 説明
$("セレクタ1,セレクタ2") カンマで区切った場合、いずれかにマッチ(OR条件)。
$("セレクタ1 セレクタ2") スペースで区切った場合、親子関係の指定になります。セレクタ1の中のセレクタ2にマッチします。
$("セレクタ1 > セレクタ2") 大なり記号の場合も親子関係の指定になりますが、セレクタ1の直下のセレクタ2にマッチします。
$("セレクタ1 + セレクタ2") プラス記号の場合、前後関係の指定になります。セレクタ1がマッチした以降からセレクタ2を探します。
				
<!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="テキスト1" />
		<input id="test2" type="text" value="テキスト2" />
		<input id="test3" type="text" value="テキスト3" />
		<div id= "div2">
			<input id="test4" type="text" value="テキスト4" />
		</div>
		<br />
		<div id= "div3">
		</div>
	</div>
</body>
</html>



			
処理結果
				

a:0:テキスト1
a:1:テキスト2

b:0:テキスト1
b:1:テキスト2
b:2:テキスト3
b:3:テキスト4

c:0:テキスト1
c:1:テキスト2
c:2:テキスト3

d:0:テキスト3


			

指定要素配下を取得

指定要素配下を取得するには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="テキスト1" />
		<input id="test2" type="text" value="テキスト2" />
		<input type="button" value="実行" />
		<div id="div2">
			<input id="test4" type="text" value="テキスト4" />
		</div>
		<br />
	</div>
	<div id="div3">
		<input id="test5" type="text" value="テキスト5" />
	</div>
</body>

</html>


			
処理結果
				
test1-テキスト1
test2-テキスト2
test4-テキスト4

			

親子、兄弟要素を取得

親子、兄弟要素を取得するには、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="テキスト1" />
</body>

</html>

			
処理結果
				
存在する

			




ページのトップへ戻る