Full solution of jquery array processing

Source: Internet
Author: User
Tags extend

jquery array processing, convenient, full-featured. Most recent projects have been used in a much more practical, one step package of features that many native JavaScript arrays cannot. The recent time is tight, today took some time to look back to the jquery Chinese document in the introduction of an array, by the way, the jquery arrays to make a summary, warm and know new.

It is strongly recommended that you open the demo demo and then read the following: http://mrthink.net/demo/ijq20101125.htm

1. $.each (array, [callback]) traversal [common]

Explanation: Different from the $ (). each () method of the JQuery object, this method can be used to sample any object. The callback function has two parameters: the first is the index of the object's member or array, 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, I believe, is not strange, in the ordinary event processing, is a variant of the For loop, but more powerful than for loop. In the array, it can easily take the array index and the corresponding value. Cases:

12345 var_mozi=[‘墨家‘,‘墨子‘,‘墨翟‘,‘兼爱非攻‘,‘尚同尚贤‘]; //本文所用到的数组, 下同  $.each(_mozi,function(key,val){      //回调函数有两个参数,第一个是元素索引,第二个为当前值      alert(‘_mozi数组中 ,索引 : ‘+key+‘ 对应的值为: ‘+val);  });

For: relative to the native. In,each a little stronger. For: In can also iterate through the array and return the corresponding index, but the value needs to be obtained through Arrname[key].

2. $.grep (Array, callback, [invert]) filter array [Common]

Explanation: Use the filter function to filter the array elements. This function passes at least two arguments (the third argument is true or FALSE, the return value of the filter function is reversed and the individual is not very useful): array to filter and filter function. The filter function must return true to preserve the element or false to delete the element. In addition, the filter function can also be set to a note string.

1234567891011121314151617 $.grep(_mozi,function(val,key){      //过滤函数有两个参数,第一个为当前元素,第二个为元素索引      if(val==‘墨子‘){          alert(‘数组值为 墨子 的下标是: ‘+key);      });     var_moziGt1=$.grep(_mozi,function(val,key){      return key>1;  });  alert(‘_mozi数组中索引值大于1的元素为: ‘+_moziGt1);     var_moziLt1=$.grep(_mozi,function(val,key){      returnkey>1;  },true);  //此处传入了第三个可靠参数,对过滤函数中的返回值取反  alert(‘_mozi数组中索引值小于等于1的元素为: ‘+_moziLt1);

3. $.map (Array,[callback]) convert an array by a given condition [general]

Explanation: The conversion function as a parameter is called for each array element, and the conversion function is passed an element that represents the transformation as an argument. The conversion function can return a converted value, null (delete an item in an array), or an array containing a value, and extend to the original array.

This is a very powerful method, but it is not commonly used. It can update the value of an array element based on a specific condition, or extend a new copy element based on the original value.

12345678910111213 var_mapArrA=$.map(_mozi,function(val){      returnval+‘[新加]‘});  var_mapArrB=$.map(_mozi,function(val){      returnval==‘墨子‘? ‘[只给墨子加]‘+val : val;  });  var _mapArrC=$.map(_mozi,function(val){      //为数组元素扩展一个新元素      return[val,(val+‘[扩展]‘)];  });  alert(‘在每个元素后面加\‘[新加]\‘字符后的数组为: ‘+ _mapArrA);  alert(‘只给元素 墨子 添加字符后的数组为: ‘+ _mapArrB);  alert(‘为原数组中每个元素,扩展一个添加字符\‘[新加]\‘的元素,返回的数组为 ‘+_mapArrC);

4. $.inarray (Val,array) determine if the value exists in the array [common]

Explanation: Determines the position of the first parameter in the array, counting from 0 (returns-1 if not found).

Remember the indexof () method? IndexOf () returns the first occurrence of the string, and $.inarray () returns the position of the passed-in parameter in the array, similarly, if found, returns a value greater than or equal to 0, or 1 if not found. Now, know how to use it. With it, it becomes easy to determine whether a value exists in the array.

12345678 var_exist=$.inArray(‘墨子‘,_mozi);  var _inexistence=$.inArray(‘卫鞅‘,_mozi)  if(_exist>=0){      alert(‘墨子 存在于数组_mozi中,其在数组中索引值是: ‘+_exist);  if(_inexistence<0){      alert(‘卫鞅 不存在于数组_mozi中!,返回值为: ‘+_inexistence+‘!‘);  }

5. $.merge (first,second) Merge two arrays [general]

Explanation: 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 function is not concat () powerful, and concat () can combine multiple arrays at the same time.

123 //原生concat()可能比它还简洁点  _moziNew=$.merge(_mozi,[‘鬼谷子‘,‘商鞅‘,‘孙膑‘,‘庞涓‘,‘苏秦‘,‘张仪‘])  alert(‘合并后新数组长度为: ‘+_moziNew.length+‘. 其值为: ‘+_moziNew);

6. $.unique (array) filter repeating elements in an array [infrequently used]

Explanation: Deletes the repeating element in the array. Handles only the deletion of an array of DOM elements, not a string or a numeric array.

The first time you see this method, I think it is a very convenient way to filter the repetition, how perfect. But a closer look, only the DOM element, function 80 percent. So, I've defined it as a less common element, at least I haven't used it since jquery.

12345678 var  _h2arr=$.makearray (h2obj);   //to repeat the array _h2arr once   _h2arr=$.merge (_ H2arr,_h2arr);  var  _curlen=_ h2arr.length;  _h2arr=$.unique (_h2arr);  var  _newlen=_h2arr.length;  alert ( +_curlen+ Code class= "JS string", Filtered to: ' +_newlen          + + (_curlen-_newlen) + ' repeating element ' )

7. $.makearray (obj) converts class array objects to arrays [infrequently used]

Explanation: The class array object is converted to an array object with the Length property and its member index is 0 to length-1.

This is a redundant method, the omnipotent $ would have included this feature. The jquery official's online interpretation is very vague, in fact, it is to convert a class array object (such as a collection of element objects obtained by getElementsByTagName) into a group of objects.

12 var_makeArr=$.makeArray(h2obj);  alert(‘h2元素对象集合的数据类型转换为: ‘+_makeArr.constructor.name);//输出Array

8. $ (DOM). ToArray () Restores all DOM elements to an array [infrequently used]

Explanation: Restores all DOM elements in the jquery collection to an array. It is not commonly used, and individuals even feel it is as superfluous as $.makearray.

12 var_toArr=$(‘h2‘).toArray();  alert(‘h2元素集合恢复后的数据类型是: ‘+_toArr.constructor.name);

Full solution of jquery array processing

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.