Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/shimalog/www/haisai/wordpress/wp-includes/pomo/plural-forms.php on line 210
[jquery]複数class名が存在した際の要素のアクセスの仕方 | ハイサイ開発ブログ

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

複数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>
		<!-- 1つ目 -->
		<div class="box"></div>
		<!-- 2つ目 -->
		<div class="box"></div>
		<!-- 3つ目 -->
		<div class="box"></div>
	</body>
</html>

実行結果

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

コメントを残す

*

サブコンテンツ

このページの先頭へ