Mootools 1.2 Tutorial (3) Introduction to Array Use

Today, we're going to see how to use arrays to manage DOM elements.
Basic Methods
.each();
When working with arrays, the .each(); method is your best friend. It provides an easy way to iterate through each element of the array, and can also do any logical processing on the elements in it if necessary. For example, we can assume that you need to call the alert method for each div object in the page:
Reference code:

Copy the codeThe code is as follows:

 
$$('div').each(function() { 
alert('a div'); 
}); 

If you use the following HTML code, the above JavaScript code will pop up two alert dialog boxes, one for each div.
Reference code:

Copy the codeThe code is as follows:

 
<div>One</div> 
<div>Two</div> 

The .each(); method does not require you to use the $$ method. Another way to create an array (like we talked about yesterday) is to use the .getElements(); method.
Reference code:

Copy the codeThe code is as follows:

 
$('body_wrap').getElements('div').each(function() { 
alert('a div'); 
}); 

Reference code:

Copy the codeThe code is as follows:

 
<div > 
<div>One</div> 
<div>Two</div> 
</div> 

There is another way to complete the same task, which is to assign the array to a variable, and then use the .each(); method for that variable:
Reference code:

Copy the codeThe code is as follows:

 
// First of all, you need to declare a variable through the statement "var VARIABLE_NAME"
// Then use the equal operator"=" to assign a value to this variable
// In this example, it is an array containing div elements
var myArray = $('body_wrap').getElements('div'); 
// Now you can use this variable as an array selector
(function() { 
alert('a div'); 
}); 

Finally, if you might want to separate your function from the selector. We will explain this issue in more depth in tomorrow's tutorial on using functions. However, now we can create a very simple example:
Reference code:

Copy the codeThe code is as follows:

 
var myArray = $('body_wrap').getElements('div'); 
// To create a function, you can declare a variable like you did just now and then name it
// Use "function()" after the equal sign to declare this variable as a function
// Finally, write your function code between { and }
var myFunction = function() { 
alert('a div'); 
}; 
// Now you can call the function just now in the .each();. method
(myFunction); 

Note: When you call a function in the .each();. method like you did just now, you don't need to add quotes to the function name.
Copy an array
$A
MooTools provides an easy way to copy an array through the $A function. Let's create an array using variables as we did just now:
Reference code:

Copy the codeThe code is as follows:

 
// Create your array variables
var myArray = $('body_wrap').getElements('div'); 

Copy an array (create a copy of that array):
Reference code:

Copy the codeThe code is as follows:

 
// Create a new variable name, name it "myCopy", and then assign a copy of "myArray" to it
var myCopy = $A(myArray ); 

Get the specified element from the array
.getLast();
The .getLast(); method returns the last element in the array. First we create an array:
Reference code:

Copy the codeThe code is as follows:

var myArray = $('body_wrap').getElements('div');

Now we can get the last element from this array:
Reference code:

Copy the codeThe code is as follows:

var lastElement = ();

The current value of the variable lastElement is the last element in the array myArray.
.getRandom();
Like .getLast();, but it randomly gets an element from the array:
Reference code:

Copy the codeThe code is as follows:

var randomElement = ();

The current value of the variable randomElement is an element randomly selected from the array myArray.
Add an element to the array
.include();
With this method, you can add another element to the array. Just pass the element selector to the .include(); method and it will be included in your array. We use the following HTML code:
Reference code:

Copy the codeThe code is as follows:

 
<div > 
<div>one</div> 
<div>two</div> 
<span >add to array</span> 
</div> 

We can create an array like we used to call all divs below "body_wrap":
Reference code:

Copy the codeThe code is as follows:

var myArray = $('body_wrap').getElements('div');

To add another element to this array, first you need to assign this element to a variable, and then use the include method:
Reference code:

Copy the codeThe code is as follows:

 
// First assign your element to a variable
var newToArray = $('add_to_array'); 
// Then add it to the array
(newToArray); 

Now, this array contains both div and span elements.
.combine();
The same as the .include(); method, but it allows you to add an array to an already existing array without worrying about duplicate content. Suppose we now get two arrays from the following HTML:
Reference code:

Copy the codeThe code is as follows:

 
<div > 
<div>one</div> 
<div>two</div> 
<span class="class_name">add to array</span> 
<span class="class_name">add to array, also</span> 
<span class="class_name">add to array, too</span> 
</div> 

We can create two arrays like this:
Reference code:

Copy the codeThe code is as follows:

 
// Build your array just like we did before
var myArray= $('body_wrap').getElements('div'); 
// Then create an array of elements with all CSS classes named .class_name
var newArrayToArray = $$('.class_name'); 

Now we can use the .combine(); method to merge two arrays, which will handle duplicate elements by itself, so we don't need to deal with:
Reference code:

Copy the codeThe code is as follows:

 
// Merge the array newArrayToArray into the array myArray
(newArrayToArray ); 

Now myArray contains all the elements in newArraytoArray.
Code Example
Arrays allow you to iterate through a list containing all items and execute the same code on each element. In this example, note the use of the variable "item" as a substitute for the current element.
Reference code:

Copy the codeThe code is as follows:

 
// Create an array that contains all elements with the CSS class name .class_name in "body_wrap"
var myArray = $('body_wrap').getElements('.class_name'); 
// First create an element to be added to the array
var addSpan = $('addtoarray'); 
// Then create an array to merge
var addMany = $$('.addMany'); 
// Now we add the element addSpan to the array
(addSpan); 
// Then merge the array addMany into myArray
(addMany); 
// Create a function that needs to be executed on every element in the array
var myArrayFunction = function(item) { 
// item now points to the current element in the array
('background-color', '#eee'); 
} 
// Now call the myArrayFunction function for each item in the array
(myArrayFunction); 

Reference code:

Copy the codeThe code is as follows:

 
<div > 
<div class="class_name">one</div><!-- this has gray background --> 
<div>two</div> 
<div class="class_name">three</div><!-- this has gray background --> 
<span >add to array</span> <!-- this has gray background --> 
<br /><span class="addMany">one of many</span> <!-- this has gray background --> 
<br /><span class="addMany">two of many</span> <!-- this has gray background --> 
</div> 

Extended learning

This tutorial is not intended to cover all you can do with arrays, but I hope it can give you a reference to tell you what MooTools provides. To learn more about arrays, read these carefully:

Array part in the document
There are many on this pageInformation about JavaScript arrays

Download a zip package with everything you need to start

Includes a simple html file, MooTools 1.2 core library, an external JavaScript file, a css file and all the examples above.