このチュートリアルでは、jQuery を使用して連続した CSS クラスを追加し、鮮明なリストを生成する方法を説明します。 2 番目の例は、jQuery の先頭に追加機能を使用してコメント リストにコメント数を追加する方法です。 まず例を見てみましょう。 1a. jQuery コードを追加します jQuery をダウンロードし、次のように タグの間に jQuery コードを追加します: コードをコピーします コードは次のとおりです。 <BR>$(document).ready(function(){ <BR>$("#step li").each(function (i) { <BR>i = i 1; <BR>$( this).addClass("item" i); <BR>}); <BR><BR> <BR>jQuery は HTML ソース コードを出力します。 </div> <BR><BR><A href="/upload/2009-12/20091221031047911.gif"> <IMG title=list-output-code style="BORDER-TOP-WIDTH: 0px; DISPLAY: inline; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=171 alt=list-output-code src="http://files.jb51.net/upload/2009-12/20091221031047680.gif" width=642 border=0>1b.CSS コーディング</A> 背景画像を使用して、それに応じて <li> 要素のスタイルを設定します。 (step1.png、step2.png、step3.png など)。 <br><br><br></p> <div class="codetitle"> <span>コードをコピー<a style="CURSOR: pointer" data="3836" class="copybut" id="copybut3836" onclick="doCopy('code3836')"><u></u> コードは次のとおりです。</a></span> </div>#step .item1 { <div class="codebody" id="code3836">background : url(step1.png) 繰り返しなし; <br>} <br>#step .item2 { <br>背景: url(step2.png) 繰り返しなし; <br>#step .item3 { <br> 背景: url(step3.png) no-repeat; <br>} <br><br> <br><br> </div> <br> <a href="/upload/2009-12/20091221031047187.gif"> 2a. 連続コンテンツを追加できます。この手法は、jQuery の prepend メソッドを使用して順序付けされたコンテンツを追加します。このメソッドは、カウントされたメッセージ リストを生成するために以下で使用されます。 <img title="step-list" style="max-width:90%" style="max-width:90%" alt="step-list" src="http://files.jb51.net/upload/2009-12/20091221031047159.gif" style="max-width:90%" border="0"></a><br><br><br><br>コードをコピー<div class="codetitle"> <span><a style="CURSOR: pointer" data="81810" class="copybut" id="copybut81810" onclick="doCopy('code81810')"> コードは次のとおりです:<u></u> </a><script type=" text/javascript " src="jquery.js"> </div>$(document).ready(function(){ <div class="codebody" id="code81810"> <br> $("#commentlist li").each(function (i) { <br>i = i 1; <br>$(this).prepend('<span class="commentnumber">> #' i '< ;/span>'); <br><br>}); <br><br><br> はそれぞれに < を追加します。 li>;span calss=”commentnumber”>count</span> <br><br><br><br> </span> </div>2b.CSS <br>Stylized<li>:position:relative 位置を使用します: 絶対コメントエントリの右上隅に .commentnumber を挿入します。 <br><a href="/upload/2009-12/20091221031047444.gif"><img title="commentlist-output-code" style="max-width:90%" style="max-width:90%" alt="commentlist-output-code" src="http://files.jb51.net/upload/2009-12/20091221031047954.gif" style="max-width:90%" border="0"></a><br>コードをコピー <br><br><div class="codetitle"> コードは次のとおりです: <span><a style="CURSOR: pointer" data="21331" class="copybut" id="copybut21331" onclick="doCopy('code21331')"> <u>#commentlist li { </u>位置:相対; </a>} </span>#commentnumber { </div>位置: 絶対; <div class="codebody" id="code21331">右: 0; <br>上: <br>} <br><br><br> 2b. CSS<br>Stylized<li>:position:relative メッセージ エントリの右上隅に .commentnumber を配置するには、position:absolute を使用します。 <br><br><br> </div> <br>コードをコピー<br><br><div class="codetitle"> コードは次のとおりです。<span><a style="CURSOR: pointer" data="2768" class="copybut" id="copybut2768" onclick="doCopy('code2768')"><u>#commentlist li {</u> 位置:相対;</a>}</span>#commentlist .commentnumber {</div> 位置: 絶対;<div class="codebody" id="code2768"> 右: 0;<br> 上: 8px;<br>}<br><br><br><br><br><br><br> </div>