[jquery]複数class名が存在した際の要素のアクセスの仕方

ハイサイ開発ブログ TOP
jquery
[jquery]複数class名が存在した際の要素のアクセスの仕方

[jquery]複数class名が存在した際の要素のアクセスの仕方

2012年10月6日 [jquery]

複数class名が存在して、一部だけになにかアクションを起こした場合のやり方。

<html>
	<head>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

		<style type="text/css">
		.box {
		  height:50px;
		  width:50px;
		  float:left;
		  margin-left:10px;
		  background-color: #ccc;
		}
		</style>

		<script type="text/javascript">
		$(function() {
			// 二つ目(".box")のスタイルをあてる
			$('.box').eq(1).css('border', 'solid 4px #f00'); // 枠線を設定
		});
		</script>
	</head>
	<body>
		<!-- １つ目 -->
		<div class="box"></div>
		<!-- ２つ目 -->
		<div class="box"></div>
		<!-- ３つ目 -->
		<div class="box"></div>
	</body>
</html>

実行結果

jquery
jqueryで”box”クラス名の２番目に対し枠線を設定しています。