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 相关文章推荐
input输入框鼠标焦点提示信息
Mar 17 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
JS面向对象实现飞机大战
Aug 26 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中json_encode()和json_decode()
2014/05/25 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
实例讲解php实现多线程
2019/01/27 PHP
javascript string字符串优化问题
2011/07/31 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
教师学期个人总结
2015/02/11 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2016年党建工作简报
2015/11/26 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
MySQL库表名大小写的选择
2021/06/05 MySQL
一文搞懂python异常处理、模块与包
2021/06/26 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
浅谈MySQL函数
2021/10/05 MySQL
python基础之//、/与%的区别详解
2022/06/10 Python