jQuery教程 $()包装函数来实现数组元素分页效果
2013-08-13 00:00
751 查看
最近一周在做中文站搜索礼品widget的需求,这个需求中有一个分页的功能;具体demo可以参见下图:
对应的js应用文件是同一个,页面中后面的offer数据已经埋好了,只是启用了css display:none样式把后面的offer元素隐藏了。现在要求对已存在的页面元素实现上下分页效果,也就是页面元素总集可以通过$(.class)获得,然后来实现分页功能。
按照传统的一般做法,用jQuery可写成如下:
大家发现没有,在向后翻页的代码中,无论最后一页只有1条offer,2条offer,还是全部3条offer,我都用同样的代码,不做任何判断
这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中断执行的情况,简化了分页代码中大量的数组索引越界判断。
对应的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中断执行的情况,简化了分页代码中大量的数组索引越界判断。
相关文章推荐
- jQuery教程 $()包装函数来实现数组元素分页效果
- jquery+json实现的搜索加分页效果
- js下通过getList函数实现分页效果的代码
- [jQuery教程]jquery基础教程六(滑动效果函数之slideDown,slideToggle和slideUp)
- jquery自定义插件实现分页效果
- jQuery实现带有洗牌效果的动画分页实例
- 利用jQuery的动画函数animate实现豌豆发射效果
- 利用jQuery srollTop()函数实现类似锚点的定位效果-兼容chrome,firefox,IE,safari
- jquery自定义插件实现分页效果
- jquery实现的视差滚动教程(视差大背景效果)
- jquery实现的伪分页效果代码
- jquery实现页面滚动到最下方自动按分页的形式加载内容效果
- jquery实现的视差滚动教程(视差大背景效果)
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- js下通过getList函数实现分页效果的代码
- jquery实现的伪分页效果代码
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- Laravel+jQuery实现AJAX分页效果
- jQuery实现的无刷新分页演示效果
- PHP+jQuery实现Ajax分页效果:jPaginate插件的应用