jQuery 连续列表实现代码


Posted in Javascript onDecember 21, 2009

这个教程将告诉你如何运用jQuery添加连续的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源码:
jQuery 连续列表实现代码 
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; 
}

jQuery 连续列表实现代码 
2a.添加连续的内容
你也可以运用这种技巧添加有序的内容,运用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>.
jQuery 连续列表实现代码 
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 连续列表实现代码
Javascript 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
javascript中expression的用法整理
May 13 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
vue中created和mounted的区别浅析
Aug 13 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
详解Vue中的watch和computed
Nov 09 Javascript
jQuery解决iframe高度自适应代码
Dec 20 #Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 #Javascript
js控制div及网页相关属性的代码
Dec 19 #Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 #Javascript
JS 的应用开发初探(mootools)
Dec 19 #Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 #Javascript
javascript demo 基本技巧
Dec 18 #Javascript
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
JavaScript运行时库属性一览表
2014/03/14 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[00:10]神之谴戒
2019/03/06 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
拉丁舞学习者的自我评价
2013/10/27 职场文书
青年文明号创建承诺
2014/03/31 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
golang使用map实现去除重复数组
2022/04/14 Golang