JavaScriptのfor文を使ってループし、ulタグ内にliタグを追加する方法です。
規則的に増えるリスト(li)や画像(img)タグを並べて表示させる時等、HTMLタグを直接ハードコーディングするのでは無く、JavaScriptのfor文を使ってタグ要素をループ回数分追加出力しマークアップの簡略化や効率化ができます。
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>
liタグを追加する箇所のHTML記述
<ul class="fortxt"> </ul>
for文のJavaScritp記述
※for文で10回ループし、appendを使ってulタグ(class=fortxt)にliタグを追加してます。
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ for(i=1;i<=10;i++){ $('.fortxt').append('<li>追加テキスト'+i+'</li>') } }); </script>
for文を使ってループし、ulタグ内にliタグを追加するデモ
※流用される場合は自己責任でお願いします。