Mootools 1.2 tutorial (3) Introduction to using arrays_Mootools

Today, we'll look at how to use arrays to manage DOM elements.
Basic methods
.each();
When dealing with arrays, the .each(); method is your best friend. It provides an easy way to iterate over each element of an array and perform any logical processing on the elements 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 code The code is as follows :

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

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

Copy code The code is as follows:

One

Two

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

Copy code The code is as follows:

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

Reference code:

Copy code The code is as follows:

One

Two

There is another way to accomplish the same task, which is to assign the array to a variable and then That variable uses the .each(); method:
Reference code:

Copy code The code is as follows:

// First 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 a variable containing a div element Array
var myArray = $('body_wrap').getElements('div');
// Now you can use this variable as an array selector
myArray.each(function() {
alert('a div');
});

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

Copy code The code is as follows:

var myArray = $('body_wrap').getElements('div');
// To create a function, you can declare a variable as before and give it a name
// Waiting Use "function()" after the number 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
myArray.each(myFunction);

Note: When you call a function in the .each();. method as just now, you do not need to put quotes around the function name.
Copy an array
$A
MooTools provides a simple way to copy an array through the $A function. Let’s create an array using variables as we just did:
Reference code:

Copy code The code is as follows:

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

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

Copy code The code is as follows:

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

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

Copy code The code is as follows:

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

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

Copy code The code is as follows:

var lastElement = myArray.getLast();

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

Copy code The code is as follows:

var randomElement = myArray.getRandom();

The current value of variable randomElement is randomly selected from the array myArray of an element.
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 code The code is as follows:

< div id="body_wrap">

one

two

add to array