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读取RSS数据
Jan 20 Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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代码包装修正版
2008/03/15 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
js function使用心得
2010/05/10 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python制作词云图代码实例
2019/09/09 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
不同意离婚代理词
2015/05/23 职场文书
2015年超市工作总结范文
2015/05/26 职场文书