Implement an array element paging effect with the $ () wrapper function of jquery

Article Introduction: jquery wrapper function to achieve the advantages of the array element paging effect.

The advantage of using jquery's $ () wrapper function to achieve the paging effect of array elements

In the last week in the Chinese station to search for the needs of the gift widget, this requirement has a paging function; Specific demo can see the following figure:

　　

(as shown above, widescreen mode, 1180, 3 offer per page)

The corresponding JS application file is the same, the page after the offer data has been buried, just enabled the CSS Display:none style to hide behind the offer elements. It is now required to implement a page-by-page effect on existing pages elements, that is, the page element collection can be obtained by $ (. Class) and then implemented paging functionality.

In accordance with the traditional general practice, jquery can be written as follows:

var total=$ (. Class). length; Gets the total number of elements that require paging

var radio=3;//according to the width screen to obtain the number of per-page display offer:

var pagesize=parseint (Total/radio); Total number of pages received;

If (total% radio!=0) {

Pagesize+=1;

}

var currentpage=1; The current page is the first page

Code to page forward:

$ (. Leftarrow,parentelem). Bind ("click", Function (e) {

var index=currentpage-1;

if (currentpage==1) {

Return

}else{

$ (. Class). CSS ("display", "none");

var Elemindex=index*radio; The pointer to the element to be displayed from the beginning of the array

$ (. Class). EQ (elemindex). CSS ("Display", "");

$ (. Class). EQ (elemindex+1). CSS ("Display", "");

$ (. Class). EQ (elemindex+2). CSS ("Display", "");

The above three lines of code can be rewritten with next ()

$ (. Class). EQ (elemindex). CSS ("Display", "")

. Next (). CSS ("Display", "")

. Next (). CSS ("Display", "");

Currentpage=index;

}

})

Code to page back:

$ (. Rightarrow,parentelem). Bind ("click", Function (e) {

var index=currentpage+1;

if (currentpage==pagesize) {

Return

}else{

$ (. Class). CSS ("display", "none");

var Elemindex=index*radio; The pointer to the element to be displayed from the beginning of the array

$ (. Class). EQ (elemindex). CSS ("Display", "");

$ (. Class). EQ (elemindex+1). CSS ("Display", "");

$ (. Class). EQ (elemindex+2). CSS ("Display", "");

The above three lines of code can be rewritten with next ()

$ (. Class). EQ (elemindex). CSS ("Display", "")

. Next (). CSS ("Display", "")

. Next (). CSS ("Display", "");

Currentpage=index;

}

})

We found no, in the back page of the code, whether the last pages only 1 offer,2 bar offer, or all 3 offer, I use the same code, do not make any judgments

$ (. Class). EQ (elemindex). CSS (' Display ', ');

$ (. Class). EQ (elemindex+1). CSS (' Display ', ');

$ (. Class). EQ (elemindex+2). CSS (' Display ', ');

These 3 statements are called consecutively.

In other words, elemindex may be out of bounds, that is, elemindex>$ (. Class). Length, even in such cases, $ (. Class). EQ (elemindex+1). CSS (' Display ', ") no problem, Browser will not complain, JS as usual, the final result can be perfect display. Thanks to the Juery object that jquery's wrapper function generates, if elemindex>=$ (. Class). length,$ (. Class). EQ (elemindex+1) returns an empty JQuery element object, Although it does not correspond to elements in the DOM, it is also a jquery object, so invoking the. css () method does not make an error, although the page does not have any change effect;

With this example, it is possible to understand why Jquey still returns jquery Object, rather than null, to mismatched elements, a thought that provides great convenience in the case of logarithmic-component page operations, because it avoids program errors caused by the array indexing crossing, causing the JS to interrupt execution, Simplifies the large number of array indexes in the paging code across the bounds of the judgment.