jQuery教程 $()包装函数来实现数组元素分页效果

181 阅读 0 评论 120 点赞

我是靠谱客的博主魁梧铅笔，最近开发中收集的这篇文章主要介绍jQuery教程 $()包装函数来实现数组元素分页效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近一周在做中文站搜索礼品widget的需求，这个需求中有一个分页的功能；具体demo可以参见下图：

src="//images.kaopuke.com/file_images/201804/201308131152274.jpg"

对应的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中断执行的情况，简化了分页代码中大量的数组索引越界判断。