• このエントリーをはてなブックマークに追加

コードすべて

すべてのコードを載せたもの。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryのeachを使って繰り返し・インデックス番号・分岐をうまく活用して表示分けする</title>
</head>

<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<style>
.disp{
	display: inline-block;
	margin: 0 0 50px;
	padding: 10px;
	border: solid 1px #ccc;
}
</style>

<div class="sample1">
	<h1>sample1</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample1 ul li').each(function(index,element) {
			$('.sample1 .disp').append( index + ' : ' + $(element).text() + "<br>\n" );
		});
	});
	</script>
	<h1>リストをeachで</h1>
	<ul>
		<li>りんご</li>
		<li>みかん</li>
		<li>ぶどう</li>
	</ul>
	
	<div class="disp">
	</div>
</div>

<hr>

<div class="sample2">
	<h1>リストをeachでさらに</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample2 ul li').each(function(index,element) {
			$('.sample2 .disp').append( index + ' : ' + $(element).text() + "<br>\n" );
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
	
	<div class="disp">
	</div>
</div>

<hr>

<div class="sample3">
	<h1>リストをeachで分岐して表示</h1>
	<p>「なす」・「とまと」のみ抽出</p>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample3 ul li').each(function(index,element) {
			if ( $(element).text() == 'なす' || $(element).text() == 'とまと' ) {
				$('.sample3 .disp').append( index + ' : ' + $(element).text() + "<br>\n" );
			}
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
	
	<div class="disp">
	</div>
</div>

<hr>

<div class="sample4">
	<h1>リストをeachで分岐してclassを付与</h1>
	<p>「なす」・「とまと」のみ抽出</p>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample4 ul li').each(function(index,element) {
			if ( $(element).text() == 'なす' || $(element).text() == 'とまと' ) {
				$(element).toggleClass('li-yasai');
			}
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
	<style>
	.sample4 ul li.li-yasai{
		color: #f00;
	}
	</style>
</div>

<hr>

<div class="sample5">
	<h1>もともと付与されているclassを使って分岐</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample5 ul li').each(function(index,element) {
			
			if ( $(element).hasClass('li-yasai') ) {
				$(element).addClass('active');
			}
			
		});
	});
	</script>
	<ul>
		<li class="li-kudamono li-kudamono-ringo"><span>りんご</span></li>
		<li class="li-yasai li-yasai-nasu"><span>なす</span></li>
		<li class="li-kudamono li-kudamono-mikan"><span>みかん</span></li>
		<li class="li-kudamono li-kudamono-budou"><span>ぶどう</span></li>
		<li class="li-yasai li-yasai-tomato"><span>とまと</span></li>
		<li class="li-kudamono li-kudamono-kaki"><span>かき</span></li>
		<li class="li-yasai li-yasai-kyuri"><span>きゅうり</span></li>
	</ul>
	<style>
	.sample5 ul li{
		margin: 0 0 10px;
		padding: 5px;
	}
	.sample5 ul li.active{
		font-weight: bold;
		text-decoration: underline;
		background: #ff0;
	}
	.sample5 ul li.li-kudamono{
		border: solid 2px #090;
	}
	.sample5 ul li.li-yasai{
		border: solid 2px #f00;
	}
	</style>
</div>

<hr>

<div class="sample6">
	<h1>番号を付与1</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample6 ul li').each(function(index,element) {
			$(element).prepend(index + '. ');
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
</div>

<hr>

<div class="sample7">
	<h1>番号を付与2</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample7 ul li').each(function(index,element) {
			$(element).prepend( (index + 1) + '. ');
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
</div>

<hr>

<div class="sample8">
	<h1>リストをeachで分岐してclassを付与</h1>
	<p>「なす」に一致する内容はli-nasuのクラスを付与/「りんご」に一致する内容はli-ringoのクラスを付与。</p>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample8 ul li').each(function(index,element) {
			
			if ( $(element).text().indexOf('なす') != -1 ) {
				$(element).addClass('li-nasu');
			} else if ( $(element).text().indexOf('りんご') != -1 ) {
				$(element).addClass('li-ringo');
			}
			
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
	<style>
	.sample8 ul li.li-nasu{
		font-weight: bold;
		color: #60c;
	}
	.sample8 ul li.li-ringo{
		font-weight: bold;
		color: #c00;
	}
	</style>
</div>


</body>
</html>

サンプル用のCSS

特に意味はないですが、リストの表示結果を枠で囲むためのものです。

.disp{
	display: inline-block;
	margin: 0 0 50px;
	padding: 10px;
	border: solid 1px #ccc;
}

sample1

リストをeachで0,1,2と番号付けする。

<div class="sample1">
	<h1>sample1</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample1 ul li').each(function(index,element) {
			$('.sample1 .disp').append( index + ' : ' + $(element).text() + "<br>\n" );
		});
	});
	</script>
	<h1>リストをeachで</h1>
	<ul>
		<li>りんご</li>
		<li>みかん</li>
		<li>ぶどう</li>
	</ul>
	
	<div class="disp">
	</div>
</div>

sample2

さらに数を増やしてみたケース。

<div class="sample2">
	<h1>リストをeachでさらに</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample2 ul li').each(function(index,element) {
			$('.sample2 .disp').append( index + ' : ' + $(element).text() + "<br>\n" );
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
	
	<div class="disp">
	</div>
</div>

sample3

なすととまとだけ表示する。番号はindexで取得しているので当然飛びます。

<div class="sample3">
	<h1>リストをeachで分岐して表示</h1>
	<p>「なす」・「とまと」のみ抽出</p>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample3 ul li').each(function(index,element) {
			if ( $(element).text() == 'なす' || $(element).text() == 'とまと' ) {
				$('.sample3 .disp').append( index + ' : ' + $(element).text() + "<br>\n" );
			}
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
	
	<div class="disp">
	</div>
</div>

sample4

なすととまとだけに色を付ける(赤い文字色設定するクラスを付与)

<div class="sample4">
	<h1>リストをeachで分岐してclassを付与</h1>
	<p>「なす」・「とまと」のみ抽出</p>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample4 ul li').each(function(index,element) {
			if ( $(element).text() == 'なす' || $(element).text() == 'とまと' ) {
				$(element).toggleClass('li-yasai');
			}
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
	<style>
	.sample4 ul li.li-yasai{
		color: #f00;
	}
	</style>
</div>

sample5

野菜・果物を分岐して、クラスを付与する。

<div class="sample5">
	<h1>もともと付与されているclassを使って分岐</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample5 ul li').each(function(index,element) {
			
			if ( $(element).hasClass('li-yasai') ) {
				$(element).addClass('active');
			}
			
		});
	});
	</script>
	<ul>
		<li class="li-kudamono li-kudamono-ringo"><span>りんご</span></li>
		<li class="li-yasai li-yasai-nasu"><span>なす</span></li>
		<li class="li-kudamono li-kudamono-mikan"><span>みかん</span></li>
		<li class="li-kudamono li-kudamono-budou"><span>ぶどう</span></li>
		<li class="li-yasai li-yasai-tomato"><span>とまと</span></li>
		<li class="li-kudamono li-kudamono-kaki"><span>かき</span></li>
		<li class="li-yasai li-yasai-kyuri"><span>きゅうり</span></li>
	</ul>
	<style>
	.sample5 ul li{
		margin: 0 0 10px;
		padding: 5px;
	}
	.sample5 ul li.active{
		font-weight: bold;
		text-decoration: underline;
		background: #ff0;
	}
	.sample5 ul li.li-kudamono{
		border: solid 2px #090;
	}
	.sample5 ul li.li-yasai{
		border: solid 2px #f00;
	}
	</style>
</div>

sample6

番号をふたたび付与するサンプル。

<div class="sample6">
	<h1>番号を付与1</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample6 ul li').each(function(index,element) {
			$(element).prepend(index + '. ');
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
</div>

sample7

番号を1から付与するサンプル。indexの値は配列なので、コンピュータの開始数値番号の[0]が割り当てられるので、表示状は0+1として、1から番号を割り当て、人間がより普段ふれている開始番号に。

<div class="sample7">
	<h1>番号を付与2</h1>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample7 ul li').each(function(index,element) {
			$(element).prepend( (index + 1) + '. ');
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
</div>

sample8

リスト内に入っている値をもとに、完全一致ではなく、検出された場合、つまりその文字列が含まれる場合はそれぞれのクラスを付与する。

<div class="sample8">
	<h1>リストをeachで分岐してclassを付与</h1>
	<p>「なす」に一致する内容はli-nasuのクラスを付与/「りんご」に一致する内容はli-ringoのクラスを付与。</p>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.sample8 ul li').each(function(index,element) {
			
			if ( $(element).text().indexOf('なす') != -1 ) {
				$(element).addClass('li-nasu');
			} else if ( $(element).text().indexOf('りんご') != -1 ) {
				$(element).addClass('li-ringo');
			}
			
		});
	});
	</script>
	<ul>
		<li>りんご</li>
		<li>なす</li>
		<li>みかん</li>
		<li>ぶどう</li>
		<li>とまと</li>
		<li>かき</li>
	</ul>
	<style>
	.sample8 ul li.li-nasu{
		font-weight: bold;
		color: #60c;
	}
	.sample8 ul li.li-ringo{
		font-weight: bold;
		color: #c00;
	}
	</style>
</div>

Dimitar VeselinovによるPixabayからの画像