最近一周在做中文站搜索禮品widget的需求，這個需求中有一個分頁的功能；具體demo可以參見下圖：
對應的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中斷執行的情況，簡化了分頁代碼中大量的數組索引越界判斷。