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 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
package.json文件配置详解
Jun 15 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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 Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
js DOM的学习笔记
2011/12/22 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
Nodejs实现用户注册功能
2019/04/14 NodeJs
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
python2.7安装图文教程
2018/03/13 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python处理PDF与CDF实例
2020/02/26 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
日语系毕业生推荐信
2013/11/11 职场文书
计算机应用专业推荐信
2013/11/13 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
计算机专业自荐信
2014/05/24 职场文书
企业挂职心得体会
2014/09/10 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
文体活动总结
2015/02/04 职场文书
师范生小学见习总结
2015/06/23 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python