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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
List Information About the Binary Files Used by an Application
Jun 11 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 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
PHP原理之异常机制深入分析
2010/08/08 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python下读取公私钥做加解密实例详解
2017/03/29 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python笔记之代理模式
2019/11/20 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python实现学生成绩测评系统
2020/06/22 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
自主实习接收函
2014/01/13 职场文书
家具促销活动方案
2014/02/16 职场文书
小学生演讲稿大全
2014/04/25 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
总经理岗位职责
2015/02/04 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
士兵突击观后感
2015/06/16 职场文书
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript