JQuery Array Processing Method Summary

Source: Internet
Author: User

Jquery provides a large number of Array Processing functions. The most common function is to traverse the array, determine whether the array exists, delete the array, and convert the array objects into arrays, welcome to your reference.

Each is used to traverse arrays.

The each () function is a tool-class function provided by almost all frameworks. Through it, You can traverse and process the attribute values of objects and arrays. This method is implemented by jQuery and jQuery objects. For jQuery objects, the each method is simply delegated: The jQuery object is passed to jQuery's each method as the first parameter. in other words, the each method provided by jQuery calls all the child elements of the object provided by parameter 1 one by one. The each method provided by the jQuery object calls the child elements of the jQuery internal part one by one.

Instance

The Code is as follows: Copy code

$. Each (array, [callback]) traversal, very common
Var arr = ['javascript ', 'php', 'java', 'c ++', 'c # ', 'perl', 'vb ', 'html ', 'css ', 'Objective-C'];
$. Each (arr, function (key, val ){
// Firebug console
Console. log ('index in arr: '+ key + ", corresponding value:" + val );
// If you want to exit the loop
// Return false;
});

$. Grep (array, callback, [invert]) filtering, commonly used

Explanation: Filter Array elements using the filter function. this function must pass at least two parameters (the third parameter is true or false, and the return value of the filter function is reversed, which is of little use): the array to be filtered and the filter function. the filter function must return true to retain the element or false to delete the element. in addition, the filter function can also be set as a string (which is not recommended for personal users and can be checked by themselves );

The Code is as follows: Copy code


Var temp = [];
Temp = $. grep (arr, function (val, key ){
If (val. indexOf ('C ')! =-1)
Return true;
// If the [invert] parameter is not set to false or is set to false, $. grep only collects array elements returned by the callback function.
// If the [invert] parameter is true, $. grep collects the array elements that the callback function returns false.
}, False );
Console. dir (temp );


$. Map (array, [callback])

The Map function in Jquery helps us Map an array or dataset. The difference between map and filter and grep is that filter and grep change the number of element sets or arrays by filtering. map does not change the number of element sets or arrays, but only changes the content.

Use map for a dataset: map data from the li Element Set and modify its specific text. Then, add the data to the element with Id div2.

Array map: map from array Items and modify its specific text, and then add it to the element with Id div2

The Code is as follows: Copy code

// Versions earlier than 1.6 only support Arrays
Temp = $. map (arr, function (val, key ){
// Return null, and the returned array length is reduced by 1
If (val = 'vb ') return null;
Return val;
});
Console. dir (temp );
// Object in json format is supported starting from 1.6
Var obj = {key1: 'val1', key2: 'val2', key3: 'val3 '};
Temp = $. map (obj, function (val, key ){
Return val;
});
Console. dir (temp );


$. InArray (val, array) is used to determine whether it is in the specified array.

The inArray () method is similar to the JavaScript native indexOf () method, used to match a number in the array. -1 indicates that no matching is found.
If the value matches the first element of the array, $. InArray () returns 0, the subscript of the array value.

If the check value exists in the array, we need to check if it is not equal to (or greater than)-1.

Example:

The Code is as follows: Copy code

Var m_31 = [1, 3, 5, 7, 8, 10, 12];
Var m_30 = [4, 6, 9, 11];
Console. log (jQuery. inArray (3, m_31 ));
// The returned value is 1.

$. Unique (array) filters repeated elements in an array, which is not commonly used.


Blahblahblah ....
// $. Unique only supports DOM element arrays and removes duplicate DOM elements. Other types of arrays (String or Number) are not supported)
// Obtain the original DOM array instead of the one encapsulated by jQuery
Var divs = $ ('div '). get ();
// Add a few divs whose class is dup
Divs = divs. concat ($ ('div. dup'). get ());
Console. log ("before unique:" + divs. length );
Divs = $. unique (divs );
Console. log ("after unique:" + divs. length );


$. MakeArray (obj) converts class array objects into arrays, which are not commonly used.

In general, many methods in jQuery and JavaScript return objects similar to arrays. For example, jQuery's proxy function $ () returns a jQuery object with many array attributes. (Length, [] array access operators, etc.), but not exactly the same as the array, lack some built-in methods for the Array (such as. pop () and. reverse ()).

The Code is as follows: Copy code

<! DOCTYPE html>
<Html>
<Head>
<Style>
Div {color: red ;}
</Style>
<Script src = "jquery-latest.js"> </script>
</Head>
<Body>
<Div> First </div>
<Div> Second </div>
<Div> Third </div>
<Div> Fourth </div>
<Script>
Var elems = document. getElementsByTagName ("div"); // returns a nodeList
Var arr = jQuery. makeArray (elems );
Arr. reverse (); // use an Array method on list of dom elements
$ (Arr). appendTo (document. body );
</Script>
</Body>
</Html>


1
Var obj = $ ('lil ');

Var arr = $. makeArray (obj );


Result:

(Typeof obj = 'object' & obj. jquery) = true;
JQuery. isArray (arr) === true;

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.