1. $.each (array, [callback]) traversal [common]
Explanation: Unlike the $ (). each () method of the JQuery object, this method can be used to sample any object (not just an array). The callback function has two parameters: the first is the index of the member or array of the object, and the second is the corresponding variable or content. If you need to exit each loop so that the callback function returns false, the other return values are ignored.
Each traversal, believed to be new, is a variant of the For loop in the usual event processing, but is more powerful than the for loop. In an array, it can easily take the array index and its corresponding value. Example:
Copy Code code as follows:
var _mozi=[' mohism ', ' Mo-tse ', ' Modi ', ' love not attack ', ' still with Shangxian ']; The array used in this article is the same as
$.each (_mozi,function (key,val) {
The callback function has two parameters, the first is the element index, and the second is the current value
Alert (' _mozi array, index: ' +key+ ' corresponds to the value: ' +val ');
});
In relation to the native for.. In,each a little stronger. For.. In can also traverse the array and return the corresponding index, but the value is to be obtained through Arrname[key];
2. $.grep (Array, callback, [invert]) filter array [Common]
Explanation: Filter The elements of an array using a filter function. This function passes at least two arguments (the third argument is true or false, and the filter function returns a value that is not useful to the individual): an array to filter and a filter function. The filter function must return true to preserve the element or false to delete the element. In addition, the filter function can be set to a note string (individuals do not recommend, to understand their own lookup);
Copy Code code as follows:
$.grep (_mozi,function (Val,key) {
The filter function has two parameters, the first is the current element, and the second is the element index
if (val== ' Mozi ') {
Alert (' array value for Mozi's subscript is: ' +key ');
}
});
var _mozigt1=$.grep (_mozi,function (Val,key) {
Return key>1;
});
The element with an index value greater than 1 in alert (' _mozi array is: ' +_MOZIGT1);
var _mozilt1=$.grep (_mozi,function (Val,key) {
Return key>1;
},true);
The third reliable parameter is passed here, and the return value in the filter function is reversed
Alert (' _mozi an element with index value less than or equal to 1 is: ' +_MOZILT1 ');
3. $.map (Array,[callback]) converts an array by a given condition [general]
Explanation: The conversion function as a parameter is invoked for each array element, and the transformation function is passed an element that represents the transformation as an argument. A conversion function can return a converted value, null (delete an item from an array), or an array containing values, and extend to the original array.
This is a very powerful method, but it is not commonly used. It can update an array element value based on a specific condition, or extend a new replica element based on the original value.
Copy Code code as follows:
var _maparra=$.map (_mozi,function (val) {
Return val+ ' [new addition] ';
});
var _maparrb=$.map (_mozi,function (val) {
Return val== ' Mozi '? ' [to Meziga] ' +val:val;
});
var _maparrc=$.map (_mozi,function (val) {
To extend a new element to an array element
return [Val, (val+ ' [extended]]];
});
Alert (' After each element is appended \ ' [New]\ '] The array is: ' + _maparra ');
Alert (' only adds the character to the element Mozi after the array is: ' + _MAPARRB);
Alert (' For each element in the original array, extends an element that adds a character \ ' [New]\ '], the returned array is ' +_MAPARRC ');
4. $.inarray (Val,array) determines whether the value exists in the array [common]
Explanation: Determines the position of the first parameter in the array, counting from 0 (if not found, returns-1).
Remember the indexof () method? IndexOf () returns the first occurrence of the string, and $.inarray () returns the position of the passed-in argument in the array, and, if found, returns a value greater than or equal to 0, or 1 if not found. Now, you know how to use it. With it, it becomes easy to judge whether a value exists in an array.
Copy Code code as follows:
var _exist=$.inarray (' Mozi ', _mozi);
var _inexistence=$.inarray (' Wei ', _mozi)
if (_exist>=0) {
Alert (' Mozi exists in the array _mozi, whose index value in the array is: ' +_exist ');
}
if (_inexistence<0) {
Alert (' Wei does not exist in the array _mozi!, the return value is: ' +_inexistence+ '! ');
}
5. $.merge (First,second) merges two arrays [general]
Interpretation: The returned result modifies the contents of the first array-the elements of the first array followed by the elements of the second array.
This method replaces the native Concat () method with jquery, but the functionality is not concat () powerful, and concat () can combine multiple arrays at the same time.
Copy Code code as follows:
Native concat () may be simpler than that.
_mozinew=$.merge (_mozi,[' ghost millet ', ' Shang Yang ', ' bin ', ' Pangjuan ', ' Su-Qin ', ' Zhang Yi '])
Alert (' The new array length after merging is: ' +_mozinew.length+ '. Its value is: ' +_mozinew ');
6. $.unique (array) filter the repeating elements in an array [not common]
Explanation: Deletes the repeating element in the array. Handles only the delete DOM element array, not the string or numeric array.
See this method for the first time, think this is a very convenient method, can filter repetition, ha, how perfect, but look carefully, only processing DOM element. function 80 percent. So, I've defined it as a less common element, at least, I haven't used it since jquery.
Copy Code code as follows:
var _h2arr=$.makearray (h2obj);
Repeat the array _h2arr once
_h2arr=$.merge (_h2arr,_h2arr);
var _curlen=_h2arr.length;
_h2arr=$.unique (_h2arr);
var _newlen=_h2arr.length;
Alert (' array _h2arr original length value: ' +_curlen+ ', filtered as: ' +_newlen
+ '. Co-filtration ' + (_curlen-_newlen) + ' repeat element ')
7. $.makearray (obj) converts class array objects to arrays [not common]
Explanation: Converts an array object of a class to an array object with a length property and a member index of 0 to Length-1.
This is a redundant method, and an omnipotent $ would have included this feature. The jquery official online explanation is very vague. Instead, it converts an array object of a class, such as a collection of element objects obtained with getElementsByTagName, to an arrays of objects.
Copy Code code as follows:
var _makearr=$.makearray (h2obj);
Alert (the data type of the ' H2 element object collection is converted to: ' +_makearr.constructor.name ');/output Array
8. $ (DOM). ToArray () Restores all DOM elements to an array [not common]
Explanation: Restores all DOM elements in the jquery collection to an array;
The method is not commonly used, and the individual even feels that it is as superfluous as $.makearray.
Copy Code code as follows:
var _toarr=$ (' H2 '). ToArray ();
The data type of alert (' H2 element collection restored is: ' +_toarr.constructor.name ');
Effect Demo code: After running, you need to refresh.
<!doctype html> <ptml> <pead> <meta charset= "GBK" > <title>jquery array processing (including instance demo) @Mr. </title> <style>/*reset css*/body{font-size:0.8em;font-family:\5fae\8f6f\96c5\9ed1;line-height:1.8em } div,h2,p,fieldset,legend,span,em,dl,dt,dd{margin:0;padding:0} input{font:12px/1.5 Tahoma,arial,sans-serif; Vertical-align:middle} H1{font-size:1em;font-weight:normal} h1 A{background: #047;p adding:2px 3px;color: #fff; Text-decoration:none} H1 A:hover{background: #a40000; color: #fff; text-decoration:underline} h3{color: #888; Font-weight:bold;font-size:1em;margin:1em auto;position:relative}/*demo css*/#demo {width:600px;margin-bottom : 100px} h2{line-height:24px;font-size:16px;font-weight:normal;} H2 span{margin-right:30px;padding:3px 10px;background: #D2D9DF; letter-spacing:1px} pre{margin-bottom:20px;padding : 10px;background: #eee; border:1px solid #ccc; line-height:18px} </style> <meta name= "Author" content= " Mr.think Bluebird "/> <meta name="keywords" content= "mr.think, front-end development, Web front-end, front-end technology, front-end development, Web front-end development, user experience, website planning, website optimization, Bluebird, Javascript,jquery,css,xhtml,html,ue , Seo,mr.think blog, Bluebird blog, PHP enthusiasts, Bluebirdsky "/> <meta name=" description "content=" Mr.think blog, Chinese Network name Bluebird, is focused on the Web front-end development, but also a fan of PHP. Love to think, a little code neat, eat raw crab legs, like meat. Here is where I record knowledge and life trivia. "/> <link rel=" Pingback "href=" http:// mrthink.net/xmlrpc.php "/> <link rel=" alternate "type=" Application/rss+xml "title=" Mr.think's Blog RSS feed "href=" http://mrthink.net/feed/"/> </pead> <body> <!--demo start--> <div id=" Demo "> <H2>&L T;span> Demo used array </span></p> <pre> var _mozi=[' mohism ', ' Mozi ', ' Modi ', ' love not attack ', ' still with Shangxian ']; </pre> <p><span>1. $.each traversal example [Common]</span><input type= "button" id= "Js_each" value= "Run"/></p> <pre> $.each (_mozi , the function (key,val) {//callback function has two parameters, the first is the element index, the second is the current value alert (' _mozi array, index: ' +key+ ' corresponds to the value: ' +val '); }); </pre> <p><span>2. $.grep () filter array [Common]</SPAN>< Input type= "button" id= "Js_grep" value= "Run"/></p> <pre> $.grep (_mozi,function (Val,key) {//Filter function has two parameters , the first is the current element, and the second is the element index if (val== ' Mozi ') {alert (' array value for Mo Zi's subscript is: ' +key '); } }); var _mozigt1=$.grep (_mozi,function (val,key) {return key>1; }); The element with an index value greater than 1 in alert (' _mozi array is: ' +_MOZIGT1); var _mozilt1=$.grep (_mozi,function (val,key) {return key>1; },true); The third reliable parameter is passed in, and the return value in the filter function is _mozi (the element with an index value less than or equal to 1 in the array is: ' +_mozilt1); </pre> <p><span>3. $.map () converts an array to a given condition [General]</span><input type= "button" id= "Js_map" value= "Run"/></p> <pre> var _map Arra=$.map (_mozi,function (val) {return val+ ' [new addition] '; }); var _maparrb=$.map (_mozi,function (val) {return val== ' Mozi '? ' [to Meziga] ' +val:val; }); var _maparrc=$.map (_mozi,function (val) {//) expands a new element for the array element return [Val, (val+ ' [extension]]]; }); Alert (' After each element is appended \ ' [New]\ '] The array is: ' + _maparra '); Alert (' only adds the character to the element Mozi after the array is: ' + _MAPARRB); Alert (' For each element in the original array, extends an element that adds a character \ ' [New]\ '], the returned array is ' +_MAPARRC '); &lT;/pre> <p><span>4. $.inarray () Determines whether values exist in the array [Common]</span><input type= button id= ' js_inarray ' value= ' run '/></p> <pre > var _exist=$.inarray (' Mozi ', _mozi); var _inexistence=$.inarray (' Wei ', _mozi) if (_exist>=0) {alert (' Mozi exists in the array _mozi, whose index value in the array is: ' +_exist '); The IF (_inexistence<0) {alert (' Wei does not exist in the array _mozi!, the return value is: ' +_inexistence+ '! '); } </pre> <p><span>5. $.merge () merge two arrays [General]</span><input type= "button" id= "Js_merge" value= "Run"/></p> <pre>// Native concat () may be more concise than it _mozinew=$.merge (_mozi,[' ghost millet ', ' Shang Yang ', ' bin ', ' Pangjuan ', ' Su-Qin ', ' Zhang Yi ']) alert (' After merging the new array length as: ' +_mozinew.length+ ' . The value is: ' +_mozinew '; </pre> <p class= "Js_unique" ><span>6. $.unique () filters repeating elements in an array []</span><input type= "button" id= "Js_unique" value= "Run"/></p> <pre> var _h2arr=$.makearray (h2obj); Repeat the array _h2arr once _h2arr=$.merge (_h2arr,_h2arr); var _curlen=_h2arr.length; _h2arr=$.unique (_h2arr); var _newlen=_h2arr.length; Alert (' array _h2arr the original length value is: ' +_curlen+ ', Filtered by: ' +_newlen + '. Total filter ' + (_curlen-_newlen) + ' repeat element ') </pre> <p><spa N>7. $.makearray () class array objects are converted to arrays [infrequently]</span><input type= "button" id= "Js_makearray" value= "Run"/></p> < pre> var _makearr=$.makearray (h2obj); Alert (the data type of the ' H2 element object collection is converted to: ' +_makearr.constructor.name '); </pre> <p><span>8. $.toarray () Restores all DOM elements to an array [not common]</span><input type= "button" id= "Js_toarray" value= "Run"/></p> < pre> var _toarr=$ (' H2 '). ToArray (); The data type of alert (' H2 element collection restored is: ' +_toarr.constructor.name '); </pre> </div> <!--DEMO end--> <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4/ Jquery.min.js "></script> <script>/******************************* * @author mr.think * @author Blog HT tp://mrthink.net/* @2010.10.31 * is free to reprint and use, but please specify the Copyright Attribution *******************************/$ (function () {var _mozi=[' mohist ', ' Mozi ', ' Modi ', ' love not attack ', ' still with Shangxian ']; //using native getElementsByTagName to get the object set of the H2 element var h2obj=document.getelementsbytagname (' H2 '); $.each () traverses the array $ (' Input#js_each '). Click (The function () {$.each (_mozi,function (key,val) {//callback function has two parameters, the first is the element index, the second is the current value Alert (' _mozi array, index: ' +key+ ' corresponds to the value: ' +val '); }); }); $.grep () filter Array $ (' Input#js_grep '). Click (function () {$.grep (_mozi,function (Val,key) {//Filter function has two parameters, the first is the current element and the second is an element index if (val== ' Mozi ') {alert (' array value for Mozi's subscript is: ' +key '); } }); var _mozigt1=$.grep (_mozi,function (val,key) {return key>1; }); The element with an index value greater than 1 in alert (' _mozi array is: ' +_MOZIGT1); var _mozilt1=$.grep (_mozi,function (val,key) {return key>1; },true); The third reliable parameter is passed in, and the return value in the filter function is _mozi (the element with an index value less than or equal to 1 in the array is: ' +_mozilt1); }); $.map () converts the array $ (' Input#js_map ') by the given criteria. Click (function () {var _maparra=$.map (_mozi,function (val) {return val+ ' [New] '; }); var _maparrb=$.map (_mozi,function (val) {return val== ' Mozi '? ' [to Meziga] ' +val:val; }); var _maparrc=$.map (_mozi,function (val) {//) expands a new element for the array element return [Val, (val+ ' [extension]]]; }); AlerT (' after each element adds \ ' [newly added]\ ' characters to the array is: ' + _maparra '); Alert (' only adds the character to the element Mozi after the array is: ' + _MAPARRB); Alert (' For each element in the original array, extends an element that adds a character \ ' [New]\ '], the returned array is ' +_MAPARRC '); }); $.inarray determines whether the value is in the array, does not exist return-1, and the existence returns the corresponding index value $ (' Input#js_inarray '). Click (function () {var _exist=$.inarray (' Mo ', _mozi); var _inexistence=$.inarray (' Wei ', _mozi) if (_exist>=0) {alert (' Mozi exists in the array _mozi, whose index value in the array is: ' +_exist '); The IF (_inexistence<0) {alert (' Wei does not exist in the array _mozi!, the return value is: ' +_inexistence+ '! '); } }); $.merge () merges two array $ (' Input#js_merge '). Click (function () {//Native concat () may be more concise than it _mozinew=$.merge (_mozi,[' ghost millet ', ' Shang Yang ', ' Bin ', ' Pangjuan ', ' Su-Qin ', ' Zhang Yi '] alert (' merged after the new array length is: ' +_mozinew.length+ '. The value is: ' +_mozinew '); }); $.unique () filters repeating elements in an array (DOM element array only) $ (' Input#js_unique '). Click (function () {var _h2arr=$.makearray (h2obj); Repeat the array _h2arr once _h2arr=$.merge (_h2arr,_h2arr); var _curlen=_h2arr.length; _h2arr=$.unique (_h2arr); var _newlen=_h2arr.length; Alert (' array _h2arr the original length value: ' +_curlen+ ', Filtered by: ' +_newlen+ '. Filter ' + (_curlen-_newlen) + ' repeating element '); }); $.makeaRR () class array convert $ (' Input#js_makearray '). Click (function () {var _makearr=$.makearray (h2obj); Alert (the data type of the ' H2 element object collection is converted to: ' +_makearr.constructor.name '); }); $ (DOM). ToArray () Restores all DOM elements to an array of $ (' Input#js_toarray '). Click (function () {var _toarr=$ (' H2 '). ToArray (); The data type of alert (' H2 element collection restored is: ' +_toarr.constructor.name '); }); }); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Original from Mr.think blog: http://mrthink.net/jquery-array-eachgrepinarray/
