Javascript and jQuery Array Methods Examples and Reference

Javascript and jQuery Array Methods Examples and Reference

Last updated:
Table of Contents

TL; DR For javascript arrays, use callbacks with parameters, for jQuery objects use callbacks with no parameters and use $(this) in the method body.

Say we have a html document with the following contents in the <body>:

<div>foo</div>
<div>bar</div>
<div>baz</div>
<div>qux</div>
<div>quux</div>

and also a simple javascript array stored in global (no need to freak out! this is just an example) variable myArr:

myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

If we use jQuery to select all <div>s, we can manipulate the collection as follows.

jQuery: each

Iterate over jQuery array elements

$('div').each(function(){
    console.log($(this).text());
});
//prints "foo","bar","baz","qux","quux"

jQuery: map

Return a transformed version of the array

var results = $('div').map(function(){
    return $(this).text().toUpperCase();
});
console.log(results);
//prints ["FOO", "BAR", "BAZ", "QUX", "QUUX"]

jQuery: filter

Return an array the jQuery elements that pass the test (i.e. the function returns true):

var results = $('div').filter(function(){
    return $(this).text().charAt(0)==='b';
});
console.log(results);
//prints [div,div]. This array has the two divs whose contents start with 'b'

Javascript: every

Return true only if function returns true for every element of the array.

// you can also make a javascript array from a JQuery collection
var results = $.makeArray($('div')).every(function(e){
    return $(e).text().charAt(0)==='g';
});
console.log(results);
//prints false. Not every div has text that begins with 'g'

Javascript: forEach

Iterate over array elements

myArr.forEach(function(el){
    if (el % 2 === 0){
        console.log(el);
    }
}
// prints 2
// prints 4
// prints 6
// prints 8
// prints 10

Javascript: some

Return true if the function given as parameter returns true for at least one element in the array.

Note that this is a javascript method, so we must first convert the jQuery collection (that's what the selector returns) into a regular javascript array and send elements as parameters the way javascript does.

var results = $.makeArray($('div')).some(function(e){
   return $(e).text().charAt(0)==='g';
});
console.log(results);
//prints false. No div has text that starts with 'g'.

var results = $.makeArray($('div')).some(function(e){
   return $(e).text().charAt(0)==='f';
});
console.log(results);
//returns true. At least one div has text beginning with 'f'

Javascript: map

Return a new array based upon an existing array.

// myArr is as defined previously:
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

var doubles = myArr.map(function(el){
    return el * 2;
};
console.log(doubles);
// [ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ]

Javascript: unshift

Add an element to the beginning of an Array

Javascript: shift

Remove the first element of the array and returns that element

Javascript: push

Add an element to the end of an Array

Javascript: pop

Remove the last element of the array and returns that element

See also

Troubleshooting

  • Uncaught ReferenceError: $ is not defined

Make sure you've included jQuery to your file before running the examples:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

P.S.: These snippets were run on google chrome.

array jquery functions

Archive

Dialogue & Discussion