快捷導(dǎo)航

jQuery教程 $()包裝函數(shù)來實現(xiàn)數(shù)組元素分頁效果

更新時間：2013年08月13日 11:55:39 作者：

最近一周在做中文站搜索禮品widget的需求，這個需求中有一個分頁的功能

最近一周在做中文站搜索禮品widget的需求，這個需求中有一個分頁的功能；具體demo可以參見下圖：

對應(yīng)的js應(yīng)用文件是同一個，頁面中后面的offer數(shù)據(jù)已經(jīng)埋好了，只是啟用了css display:none樣式把后面的offer元素隱藏了?，F(xiàn)在要求對已存在的頁面元素實現(xiàn)上下分頁效果，也就是頁面元素總集可以通過$(.class)獲得，然后來實現(xiàn)分頁功能。

按照傳統(tǒng)的一般做法，用jQuery可寫成如下:

復(fù)制代碼代碼如下:

var total=$(.class).length; //取得需要分頁的元素的總個數(shù)
var radio=3;//根據(jù)寬窄屏獲得每頁顯示offer條數(shù)：
var pageSize=parseInt(total/radio); //獲得總頁數(shù)；
if(total % radio !=0)｛
   pageSize+=1;  
}
var currentPage=1;  //當(dāng)前頁為第一頁
//向前翻頁的代碼：
$(.leftArrow,parentElem).bind('click',function(e){
var index=currentPage-1;
   if(currentPage==1){
     return;
   }else{
      $(.class).css('display','none');
      var elemIndex=index*radio; //數(shù)組中起始要顯示的元素的指針
       $(.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; //數(shù)組中起始要顯示的元素的指針      
        $(.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;
   }
})

大家發(fā)現(xiàn)沒有，在向后翻頁的代碼中，無論最后一頁只有1條offer,2條offer,還是全部3條offer，我都用同樣的代碼，不做任何判斷

復(fù)制代碼代碼如下:

$(.class).eq(elemIndex).css('display',");
$(.class).eq(elemIndex+1).css('display',");
$(.class).eq(elemIndex+2).css('display',");

這3條語句連續(xù)調(diào)用。

也就是說，elemIndex有可能越界，即elemIndex>$(.class).length，即使在這樣的情況下，$(.class).eq(elemIndex+1).css('display',")照樣沒有問題，瀏覽器不會報錯，js照常執(zhí)行，最終結(jié)果照樣能完美展示。這要感謝jQuery的包裝函數(shù)產(chǎn)生的juery對象,如果elemIndex>=$(.class).length,$(.class).eq(elemIndex+1)返回的是一個空jquery元素對象，雖然它沒有對應(yīng)到DOM中的元素，但它還是一個jQuery對象，因此調(diào)用.css()方法不會出錯，雖然頁面沒有任何變化效果；

通過這個例子，就能夠理解為什么jQuey對不匹配的元素仍然返回jQuery Object,而不是null,這種思想對數(shù)組分頁操作來說，提供了極大的便利性，因為避免了數(shù)組索引越界引起程序錯誤，導(dǎo)致js中斷執(zhí)行的情況，簡化了分頁代碼中大量的數(shù)組索引越界判斷。

您可能感興趣的文章: