jQuery 連続リストの実装 code_jquery

このチュートリアルでは、jQuery を使用して連続した CSS クラスを追加し、鮮明なリストを生成する方法を説明します。 2 番目の例は、jQuery の先頭に追加機能を使用してコメント リストにコメント数を追加する方法です。
まず例を見てみましょう。
1a. jQuery コードを追加します
jQuery をダウンロードし、次のように

タグの間に jQuery コードを追加します:

コードをコピーします コードは次のとおりです。

1b.CSS コーディング 背景画像を使用して、それに応じて

要素のスタイルを設定します。 (step1.png、step2.png、step3.png など)。

コードをコピー コードは次のとおりです。

#step .item1 {

background : url(step1.png) 繰り返しなし;
}
#step .item2 {
背景: url(step2.png) 繰り返しなし;
#step .item3 {
背景: url(step3.png) no-repeat;
}

2a. 連続コンテンツを追加できます。この手法は、jQuery の prepend メソッドを使用して順序付けされたコンテンツを追加します。このメソッドは、カウントされたメッセージ リストを生成するために以下で使用されます。



コードをコピー

コードは次のとおりです:

$(document).ready(function(){

$("#commentlist li").each(function (i) {
i = i 1;
$(this).prepend('> #' i '< ;/span>');

});


はそれぞれに ;span calss=”commentnumber”>count

2b.CSS
Stylized

:position:relative 位置を使用します: 絶対コメントエントリの右上隅に .commentnumber を挿入します。

コードをコピー

コードは次のとおりです: #commentlist li { 位置:相対; } #commentnumber {

位置: 絶対;

右: 0;
上:
}


2b. CSS
Stylized

:position:relative メッセージ エントリの右上隅に .commentnumber を配置するには、position:absolute を使用します。