jQuery 連續(xù)列表實(shí)現(xiàn)代碼
更新時(shí)間：2009年12月21日 03:10:48 作者：
你有沒有手工的編寫過一些重復(fù)的代碼？你也覺得它們是如此的無聊吧。好了，這里有更好的解決辦法。
這個(gè)教程將告訴你如何運(yùn)用jQuery添加連續(xù)的CSS類生成一個(gè)生動的列表。第二個(gè)示例是如何運(yùn)用jQuery的prepend特性為留言列表添加一個(gè)留言計(jì)數(shù)。
可以先看看示例。
1a.添加jQuery代碼
下載jQuery，在<head>標(biāo)簽之間如下添加jQuery代碼：
復(fù)制代碼 代碼如下:
<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等等）。
復(fù)制代碼 代碼如下:
#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ù)的留言列表。
復(fù)制代碼 代碼如下:
<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放在留言條目的右上角。
復(fù)制代碼 代碼如下:
#commentlist li {
position: relative;
}
#commentlist .commentnumber {
position: absolute;
right: 0;
top: 8px;
}
2b.CSS
樣式化<li>:position:relative 用position：absolute把.commentnumber放在留言條目的右上角。
復(fù)制代碼 代碼如下:
#commentlist li {
position: relative;
}
#commentlist .commentnumber {
position: absolute;
right: 0;
top: 8px;
}
相關(guān)文章
本篇文章給大家總結(jié)了關(guān)于jQuery代碼優(yōu)化方法，如果你這方面有需求，跟著小編一起學(xué)習(xí)下吧。2018-01-01
jQuery實(shí)現(xiàn)倒計(jì)時(shí)（倒計(jì)時(shí)年月日可自己輸入）
本篇文章主要對jQuery實(shí)現(xiàn)倒計(jì)時(shí)進(jìn)行了實(shí)例分析。并附上實(shí)例源碼，有興趣的朋友可以下載源碼調(diào)試運(yùn)行試試看，希望對大家有所幫助2016-12-12
最近再做價(jià)值中國微博，從用戶體驗(yàn)的角度，將很多常用的window.alert或者window.confirm之類比較生硬死板冷不丁的提示改為彈出層的方式實(shí)現(xiàn)。2010-10-10
JQuery DataTable刪除行后的頁面更新利用Ajax解決
使用Jquery的DataTable進(jìn)行數(shù)據(jù)表處理非常方便，常遇到的一個(gè)問題就是刪除一行后頁面必須進(jìn)行更新，下面與大家分享下使用Ajax的解決方法2013-05-05
Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫生成菜單導(dǎo)航條
在網(wǎng)上瀏覽了許多關(guān)于利用Jquery.TreeView插件生成樹的例子！但是大多數(shù)都沒有結(jié)合數(shù)據(jù)庫來生成樹，很難運(yùn)用到實(shí)際項(xiàng)目中！2010-08-08
這篇文章主要為大家詳細(xì)介紹了jquery組件WebUploader文件上傳用法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
jQuery源碼分析之jQuery.fn.each與jQuery.each用法
這篇文章主要介紹了jQuery源碼分析之jQuery.fn.each與jQuery.each用法,較為詳細(xì)的分析了each的用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
基于JQuery的多標(biāo)簽實(shí)現(xiàn)代碼
最近在學(xué)習(xí)JQuery，其實(shí)也不叫學(xué)習(xí)，很久以前就學(xué)過，只是有一段時(shí)間沒用，有些生疏了，于是就做幾個(gè)小例子來練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來2012-09-09
jQuery教程 $()包裝函數(shù)來實(shí)現(xiàn)數(shù)組元素分頁效果
最近一周在做中文站搜索禮品widget的需求，這個(gè)需求中有一個(gè)分頁的功能2013-08-08
使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動實(shí)例
下面小編就為大家?guī)硪黄褂胘query實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動實(shí)例。2016-11-11