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

コードすべて

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

<!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からの画像