jQuery教程 $()包装函数来实现数组元素分页效果


Posted in Javascript onAugust 13, 2013

最近一周在做中文站搜索礼品widget的需求,这个需求中有一个分页的功能;具体demo可以参见下图:

jQuery教程 $()包装函数来实现数组元素分页效果

对应的js应用文件是同一个,页面中后面的offer数据已经埋好了,只是启用了css display:none样式把后面的offer元素隐藏了。现在要求对已存在的页面元素实现上下分页效果,也就是页面元素总集可以通过$(.class)获得,然后来实现分页功能。

按照传统的一般做法,用jQuery可写成如下:

var total=$(.class).length; //取得需要分页的元素的总个数
var radio=3;//根据宽窄屏获得每页显示offer条数:
var pageSize=parseInt(total/radio); //获得总页数;
if(total % radio !=0){
   pageSize+=1;  
}
var currentPage=1;  //当前页为第一页
//向前翻页的代码:
$(.leftArrow,parentElem).bind('click',function(e){
var index=currentPage-1;
   if(currentPage==1){
     return;
   }else{
      $(.class).css('display','none');
      var elemIndex=index*radio; //数组中起始要显示的元素的指针
       $(.class).eq(elemIndex).css('display','');
        $(.class).eq(elemIndex+1).css('display','');
        $(.class).eq(elemIndex+2).css('display','');
        //上面三句代码可用next()重写成   
        //$(.class).eq(elemIndex).css('display','')
        //  .next().css('display','')
        //  .next()..css('display','');     
    currentPage=index;
   }
})
//向后翻页的代码:
$(.rightArrow,parentElem).bind('click',function(e){
var index=currentPage+1;
   if(currentPage==pageSize){
     return;
   }else{
      $(.class).css('display','none');
      var elemIndex=index*radio; //数组中起始要显示的元素的指针      
        $(.class).eq(elemIndex).css('display','');
        $(.class).eq(elemIndex+1).css('display','');
        $(.class).eq(elemIndex+2).css('display','');
       //上面三句代码可用next()重写成   
        //$(.class).eq(elemIndex).css('display','')
        //  .next().css('display','')
        //  .next()..css('display','');  
    currentPage=index;
   }
})

大家发现没有,在向后翻页的代码中,无论最后一页只有1条offer,2条offer,还是全部3条offer,我都用同样的代码,不做任何判断

$(.class).eq(elemIndex).css('display',");
$(.class).eq(elemIndex+1).css('display',");
$(.class).eq(elemIndex+2).css('display',");

这3条语句连续调用。

也就是说,elemIndex有可能越界,即elemIndex>$(.class).length,即使在这样的情况下,$(.class).eq(elemIndex+1).css('display',")照样没有问题,浏览器不会报错,js照常执行,最终结果照样能完美展示。这要感谢jQuery的包装函数产生的juery对象,如果elemIndex>=$(.class).length,$(.class).eq(elemIndex+1)返回的是一个空jquery元素对象,虽然它没有对应到DOM中的元素,但它还是一个jQuery对象,因此调用.css()方法不会出错,虽然页面没有任何变化效果;

通过这个例子,就能够理解为什么jQuey对不匹配的元素仍然返回jQuery Object,而不是null,这种思想对数组分页操作来说,提供了极大的便利性,因为避免了数组索引越界引起程序错误,导致js中断执行的情况,简化了分页代码中大量的数组索引越界判断。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
js setTimeout 常见问题小结
Aug 13 #Javascript
删除select中所有option选项jquery代码
Aug 12 #Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 #Javascript
JavaScript解析URL参数示例代码
Aug 12 #Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 #Javascript
You might like
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
做个自己站内搜索引擎
2006/10/09 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
详解php命令注入攻击
2019/04/06 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python计算文本文件行数的方法
2015/07/06 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
森林防火工作方案
2014/02/14 职场文书
给老师的一封建议书
2014/03/13 职场文书
药店促销活动总结
2014/07/10 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
Mysql Show Profile
2021/04/05 MySQL
Python多个MP4合成视频的实现方法
2021/07/16 Python