Learn MooTools for 30 days (3): Managing DOM elements in Arrays

In the previous tutorial, "Learn MooTools for 30 days (2): DOM selector", we introduced the selector, there are many methods that will return an array (a special list that you can perform multiple operations on the content ). Today, let's take a look at how to use arrays to manage DOM elements.
 
Basic Method

. Each ();

When processing arrays, The. each (); method is your best friend. It provides an easy way to repeat each element in the arrays. If necessary, you can perform any logical processing on the elements. For example, we can assume that you need to call the alert method for each div object on the page:
Reference code:

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

If the following HTML code is used, the above JavaScript code will pop up two alert dialogs, one for each div.
Reference code:

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

. Each (); you do not need to use the $ method for the method. Another way to create an array (as we mentioned yesterday) is to use the. getElements (); method.
Reference code:

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

Reference code:

<div id="body_wrap">
    <div>One</div>
    <div>Two</div>
</div>

Another way to complete this same task is to assign this array to a variable and then use. each () for that variable. Method:
Reference code:

// First, you need to declare a variable through the "var VARIABLE_NAME" statement.
// Then assign a value to this variable using the equals operator "= ".
// In this example, an array containing div elements
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 want to separate your function from the selector. We will explain this question in more detail in tomorrow's tutorial on using functions. However, now we can create a very simple example:
Reference code:

Var myArray = $ ('body _ wrap '). getElements ('div ');

// To create a function, you can declare a variable as you just did and 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 in. each ();. method.
MyArray. each (myFunction );

Note: When you call a function in the. each ();. method, you do not need to quote the function name.

 Returns an array.

$

MooTools provides A simple method-using the $ A function to merge objects into an array. Let's use variables to create an array as we just did:
Reference code:

// Create your array variable
Var myArray = $ ('body _ wrap '). getElements ('div ');

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

// Create a new variable name named "myCopy" and assign the copy of "myArray" to it
Var myCopy = $ A (myArray );

Obtain the specified element from the array.

. GetLast ();

. GetLast (); method returns the last element in the array. First, we create an array:
Reference code:

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

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

var lastElement = myArray.getLast();

The current value of the variable lastElement is the last element in the array myArray.

 . GetRandom ();

It is the same as. getLast (); but it randomly retrieves an element from the array:
Reference code:

var randomElement = myArray.getRandom();

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. You only need to pass the element selector to The. include (); method, which will include it in your array. We use the following HTML code:
Reference code:

<div id="body_wrap">
    <div>one</div>
    <div>two</div>
    <span id="add_to_array">add to array</span>
</div>

We can create an array by calling all the divs under "body_wrap" as before:
Reference code:

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

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

// Assign your element to a variable first
Var newToArray = $ ('add _ to_array ');

// Add it to the array
MyArray. include (newToArray );

Now, this array contains both div and span elements.

 . Combine ();

The method is the same as. include (); method, but it allows you to add an array to an existing array without worrying about Duplicated content. Suppose we get two arrays from the following HTML:
Reference code:

<div id="body_wrap">
    <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 as follows:
Reference code:

// Create your array as we did before
Var myArray = $ ('body _ wrap '). getElements ('div ');

// Create an array of elements for all CSS classes named. class_name
Var newArrayToArray =array $ ('. class_name ');

Now we can use the. combine (); Method to combine two arrays. This method will process the elements of the re-attention, so we do not need to deal with it:
Reference code:

// Combine the array newArrayToArray into the array myArray
MyArray. combine (newArrayToArray );

Now myArray contains all the elements in newArraytoArray.
 
Sample Code

Array allows you to traverse the list containing all projects and execute the same code for each element. In this example, pay attention to the use of the variable "item" as an alternative to the current element.
Reference code:

// Create an array containing all the elements of the CSS class named. 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 ');
// Create an array for merging
Var addmedia=$ ('. addmedia ');

// Now we add the element addSpan to the array.
MyArray. include (addSpan );
// Add the values array to the myArray
MyArray. combine (addmedia );

// Create a function to execute each element in the array
Var myArrayFunction = function (item ){
// Item now points to the current element in the array
Item. setStyle ('background-color', '# eee ');
}

// Call the myArrayFunction function for each item in the array.
MyArray. each (myArrayFunction );

Reference code:

<div id="body_wrap">
    <div class="class_name">one</div><!-- this has gray background -->
    <div>two</div>
    <div class="class_name">three</div><!-- this has gray background -->
    <span id="addtoarray">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>