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 相关文章推荐
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
Js apply方法详解
Feb 16 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
微信小程序录音与播放录音功能
Dec 25 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
简单实现js浮动框
2016/12/13 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Sanic框架Cookies操作示例
2018/07/17 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python画图高斯分布的示例
2019/07/10 Python
python中altair可视化库实例用法
2021/01/26 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
会计毕业生自荐信
2013/11/21 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
yy司仪主持词
2014/03/22 职场文书
高中学生期末评语
2014/04/25 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
出纳工作检讨书
2014/10/18 职场文书
订货会邀请函
2015/01/31 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js