jQuery 連續(xù)列表實(shí)現(xiàn)代碼
這個(gè)教程將告訴你如何運(yùn)用jQuery添加連續(xù)的CSS類生成一個(gè)生動的列表。第二個(gè)示例是如何運(yùn)用jQuery的prepend特性為留言列表添加一個(gè)留言計(jì)數(shù)。
可以先看看示例。
1a.添加jQuery代碼
下載jQuery,在<head>標(biāo)簽之間如下添加jQuery代碼:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#step li").each(function (i) {
i = i+1;
$(this).addClass("item" i);
});
});
</script>
jQuery將如下輸出html源碼:

1b.CSS編碼
相應(yīng)的運(yùn)用背景圖片樣式化<li>元素。(step1.png, step2.png, step3.png等等)。
#step .item1 {
background: url(step1.png) no-repeat;
}
#step .item2 {
background: url(step2.png) no-repeat;
}
#step .item3 {
background: url(step3.png) no-repeat;
}

2a.添加連續(xù)的內(nèi)容
你也可以運(yùn)用這種技巧添加有序的內(nèi)容,運(yùn)用jQuery的prepend方法。下面就采用此種方法生成計(jì)數(shù)的留言列表。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#commentlist li").each(function (i) {
i = i+1;
$(this).prepend('<span class="commentnumber"> #' i '</span>');
});
});
</script>
將為每個(gè)<li>添加一個(gè)<span calss=”commentnumber”>計(jì)數(shù)</span>.

2b.CSS
樣式化<li>:position:relative 用position:absolute把.commentnumber放在留言條目的右上角。
#commentlist li {
position: relative;
}
#commentlist .commentnumber {
position: absolute;
right: 0;
top: 8px;
}
2b.CSS
樣式化<li>:position:relative 用position:absolute把.commentnumber放在留言條目的右上角。
#commentlist li {
position: relative;
}
#commentlist .commentnumber {
position: absolute;
right: 0;
top: 8px;
}

相關(guān)文章
- jquery 可以用text()方法來取得字符串,再用length 判斷長度,然后用substring()方法格式化截?cái)?/div> 2011-09-09
jQuery對checkbox 復(fù)選框的全選全不選反選的操作
這篇文章主要介紹了jQuery對checkbox 復(fù)選框的全選全不選反選的操作 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08兩個(gè)select之間option的互相添加操作(jquery實(shí)現(xiàn))
兩個(gè)select,將其中一個(gè)select選中的選項(xiàng)添加到另一個(gè)select中,或者點(diǎn)擊全部添加按鈕將所有的option都添加過去.2009-11-11為jquery的ajaxfileupload增加附加參數(shù)的方法
這篇文章主要介紹了為jquery的ajaxfileupload增加附加參數(shù)的方法,需要的朋友可以參考下2014-03-03jQuery中filter()和find()的區(qū)別深入了解
一直不是很清楚filter()方法和find()方法的區(qū)別,看jQuery Cookbook一書后,終于算是搞清楚了,下面將新的與大家分享下2013-09-09Juery解決tablesorter中文排序和字符范圍的方法
這篇文章主要介紹了Juery解決tablesorter中文排序和字符范圍的方法,實(shí)例分析了jQuery針對tablesorter中文排序和字符范圍的解決方法,需要的朋友可以參考下2015-05-05最新評論