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 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vuex state中的数组变化监听实例
Nov 06 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
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
土木工程应届生求职信
2013/10/31 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
10的分与合教学反思
2014/04/30 职场文书
启动仪式策划方案
2014/06/14 职场文书
大学生学期个人总结
2015/02/12 职场文书
综合测评个人总结
2015/03/03 职场文书
小学感恩节活动总结
2015/03/24 职场文书
六一活动主持词
2015/06/30 职场文书
2016大学军训心得体会
2016/01/11 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android