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