JavaScriptのwhile文を使ってループし、ulタグ内にliタグを追加する方法をご紹介します。
前回の記事(for文を使ってループ回数分タグ要素を追加する方法【HTMLタグ簡略化】)とほぼ同じ処理をやってます。
規則的に増えるリスト(li)や画像(img)タグを並べて表示させる時等、HTMLタグを直接ハードコーディングするのでは無く、JavaScriptのwhile文を使ってタグ要素を反復処理で出力しマークアップの簡略化や効率化ができます。
Contents
ループ回数分タグ要素を追加するCSSの記述
※ループ回数分liタグ要素を追加するCSS記述です。必要に応じて書き換えてください。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; } h1{ font-size:16px; line-height:1.6em; text-align:center; font-weight:normal; padding:10px 0 30px 0; } ul{ width: 120px; margin: 0 auto; padding: 0; } ul li{ list-style: none; text-align: center; font-weight: bold; } </style>
while文を使ってループ回数分タグ要素を追加するHTMLの記述
※ループ回数分タグ要素(liタグ)の出力先(class=”whiletxt”)を用意します。必要に応じて変更して下さい。
<h1>以下はwhile文を使って10回ループし、ulタグ内にliタグを10個追加してます</h1> <ul class="whiletxt"> </ul>
while文を使ってループ回数分タグ要素を追加するJavaScriptの記述
※jquery-2.2.0.min.jsファイルを読み込みます。while文で10回ループし、appendを使ってulタグ(class=whiletxt)にliタグを追加してます。
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var i=1; while(i<=10){ $('.whiletxt').append('<li>追加テキスト'+i+'</li>') i++; } }); </script>
while文を使ってループし、ulタグ内にliタグを追加するデモページ
while文を使ってループし、ulタグ内にliタグを追加するデモ
※流用される場合は自己責任でお願いします。
ディスプレイ広告