Today, we're going to look at how to use arrays to manage DOM elements.
Basic methods
. each ();
When processing arrays,. each (); method is your best friend. It provides an easy way to traverse each element of an array and, if necessary, to make any logical processing of its elements. For example, we can assume that you need to invoke the alert method for each Div object in the page:
Reference code:
Copy Code code as follows:
$$ (' div '). each (function () {
Alert (' a div ');
});
If you use the following HTML code, the above JavaScript code will pop up two alert dialogs, one for each div.
Reference code:
Copy Code code as follows:
<div>One</div>
<div>Two</div>
. each (); method does not require you to use the $$ method. Another way to create an array (as we talked about yesterday) is to use the. getelements () method.
Reference code:
Copy Code code as follows:
$ (' Body_wrap '). GetElements (' div '). each (function () {
Alert (' a div ');
});
Reference code:
Copy Code code as follows:
<div id= "Body_wrap" >
<div>One</div>
<div>Two</div>
</div>
There is another way to do the same task, which is to assign the array to a variable, and then use the variable. each () method:
Reference code:
Copy Code code as follows:
First you need to declare a variable by using the statement "Var variable_name"
And then use the equals operator "=" To assign a value to this variable
In this case, it's an array containing the 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 might want to separate your function from the selector. We'll explain this more deeply in tomorrow's tutorial on using functions. However, now we can create a very simple example:
Reference code:
Copy Code code as follows:
var myarray = $ (' body_wrap '). GetElements (' div ');
To create a function, you can declare a variable just like that, and then name it
Use function () after the equal sign to declare the variable to be a function
Finally, write your function code between {and}
var myfunction = function () {
Alert (' a div ');
};
Now you can be in. each ();. method to call the function just now.
Myarray.each (MyFunction);
Note: When you are just like that in. each ();. method, you do not need to enclose the function name in quotes.
Copy an array
$A
MooTools provides an easy way to copy an array using the $a function. Let's use the variable to create an array as we just did:
Reference code:
Copy Code code 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 code as follows:
Create a new variable name named "Mycopy" and assign a copy of "MyArray" to it
var mycopy = $A (myarray);
Gets the specified element from the array
. GetLast ();
The. GetLast () method returns the last element in the array. First we build an array:
Reference code:
Copy Code code as follows:
var myarray = $ (' body_wrap '). GetElements (' div ');
Now we can get the last element from this array:
Reference code:
Copy Code code as follows:
var lastelement = Myarray.getlast ();
Variable lastelement The current value is the last element in the array myarray.
. Getrandom ();
and. GetLast (); but it randomly obtains an element from an array:
Reference code:
Copy Code code as follows:
var randomelement = Myarray.getrandom ();
Variable randomelement The current value is an element that is randomly selected from the array myarray.
Add an element to the array
. include ();
In this way, 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 code as follows:
<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 as we used to invoke all the div below "body_wrap":
Reference code:
Copy Code code as follows:
var myarray = $ (' body_wrap '). GetElements (' div ');
To add another element to the array, first you need to assign the element to a variable, and then use the Include method:
Reference code:
Copy Code code as follows:
First, assign your element to a variable
var Newtoarray = $ (' Add_to_array ');
And then add it to the array
Myarray.include (Newtoarray);
Now, this array contains both DIV and span elements.
. Combine ();
and. Include (); method, but it lets you add an array to an existing array without worrying about duplicate content. Let's say we now get two arrays from the following HTML:
Reference code:
Copy Code code as follows:
<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 like this:
Reference code:
Copy Code code as follows:
Just like we used to build your array
var myarray= $ (' Body_wrap '). GetElements (' div ');
Then create an array of elements with the CSS class named. class_name.
var Newarraytoarray = $$ ('. class_name ');
Now we can use the. Combine () method to merge the two arrays, which handle the duplicated elements themselves, so we don't have to deal with:
Reference code:
Copy Code code as follows:
Merging array Newarraytoarray into array myarray
Myarray.combine (Newarraytoarray);
Now myarray contains all the elements in the Newarraytoarray.
code example
An array allows you to iterate through the list of all items and execute the same code for each element. In this example, note that the variable "item" is used as a substitute for the current element.
Reference code:
Copy Code code as follows:
Creates an array that contains 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 add to the array
var Addspan = $ (' Addtoarray ');
And then create an array to merge.
var addmany = $$ ('. Addmany ');
Now we add the element Addspan to the array.
Myarray.include (Addspan);
Then merge the array addmany into the myarray
Myarray.combine (Addmany);
Create a function that needs to be executed for each element in the array
var myarrayfunction = function (item) {
Item now points to the current element in the array
Item.setstyle (' Background-color ', ' #eee ');
}
Now call the Myarrayfunction function for each item in the array
Myarray.each (myarrayfunction);
Reference code:
Copy Code code as follows:
<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>
Extended Learning
This tutorial is not intended to cover all the things you can do with the array, but hopefully it will give you a reference to what the MooTools provides. To learn more about the array, please read these items carefully:
- part of an array in a document
- This page contains a lot of information about JavaScript arrays
Download a Zip package that contains everything you need to start
Includes a simple HTML file, MooTools 1.2 core library, an external JavaScript file, a CSS file, and all of the above examples.
