用jQuery的$()封裝函數實現數組元素分頁效果

文章簡介：jQuery封裝函數來實現數組元素分頁效果的優勢。

　　用jQuery的$()封裝函數來實現數組元素分頁效果的優勢

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

　　

　　(如上圖，寬屏模式,1180下，每頁3個offer)

　　對應的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中斷執行的情況，簡化了分頁代碼中大量的數組索引越界判斷。