- 206.420.2394
- Contact Us
-
Chat
- |
- Client Login
If you haven’t already, be sure and check out yesterday’s tutorial - Day 2 - Selectors
In the last tutorial, we looked at selectors, many of which created arrays (a special list that gives you a lot control over the contents). Today, we are going to take a look at how to use arrays to manage DOM elements.
.each(); is your best friend when dealing with arrays. It provides an easy way to iterate through a list of elements, applying whatever script logic is necessary. For example, lets say you wanted to call one alert box for every div within a page:
$$('div').each(function() { alert('a div'); });
With this html, the code above would fire two alert boxes, one for each div.
<div>One</div> <div>Two</div>
.each(); doesn’t require you use $$. Another way to create an array (liked we talked about yesterday), is to use .getElements();.
$('body_wrap').getElements('div').each(function() { alert('a div'); });
<div id="body_wrap">
<div>One</div>
<div>Two</div>
</div>Still another way to accomplish the same task is to send the array to a variable, then use .each(); on that variable:
//first you declare your variable by saying "var VARIABLE_NAME" //then you use the equal sign "=" to define what goes in that variable //in this case, an array of divs var myArray = $('body_wrap').getElements('div'); //now, you can use that array variable just like an array selector myArray.each(function() { alert('a div'); });
Finally, you are going to want to separate out your function from the selector and .each();. We are going to talk more in depth about how to use functions in tomorrow’s tutorial, but for now, we can create a very simple one like this:
var myArray = $('body_wrap').getElements('div'); //to create a new function, you declare a variable just like before, then name it //after the equal sign you say "function()" to declare the variable as a function //finally, you place your function code between { and }; var myFunction = function() { alert('a div'); }; //here you just call the function inside .each();. myArray.each(myFunction);
Note: When you call a function like we did here inside of .each();, you do not put any quotes around the function name.
Mootools provides a way to simply copy an array with the $A function. Lets set up another array with a variable like we did above:
//create your array variable var myArray = $('body_wrap').getElements('div');
To create a copy of the array:
//create a new variable, called "myCopy," then assign the copy of "myArray" to your new variable var myCopy = $A(myArray );
Now myCopy contains the same elements as myArray.
.getLast(); will return the last element within an array. First we set up our array:
var myArray = $('body_wrap').getElements('div');
Now we can grab the last element within the array:
var lastElement = myArray.getLast();
The variable lastElement now represents the last element within myArray.
Works just like .getLast();, but will get a random element from the array.
var randomElement = myArray.getRandom();
The variable randomElement is now represents a randomly chosen element within myArray.
With this method, you can add another item into an array. Simply place the element selector within .include(); and attach it to your array. With the following html setup:
<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 like we did before by calling all the divs that are children of ‘body_wrap.’
var myArray = $('body_wrap').getElements('div');
To add another element to that array, first add the element you want to include to a var, then use the method .include();.
//first add your element to a var var newToArray = $('add_to_array'); //then include the var in the array myArray.include(newToArray);
Now, the array contains both the divs and the span element.
Works just like .include();, except it lets you add an new array to an existing existing array without having to worry about duplicate content. Say we had two arrays from the following html:
<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 could then build the following two arrays:
//create your array just like we did before var myArray= $('body_wrap').getElements('div'); //then create an array from all elements with .class_name var newArrayToArray = $$('.class_name');
Now, we can use .combine(); to combine the two arrays, and the method will deal with any duplicate content so we don’t have to.
//then combine newArrayToArray with myArray myArray.combine(newArrayToArray );
Now myArray contains all the elements from newArraytoArray.
Arrays let you do iterate through a list of items, applying the same chunk of code to each one. In this example, notice the use of “item” as a placeholder for the current element.
//creates an array of all elements within #body_wrap with the class .class_name var myArray = $('body_wrap').getElements('.class_name'); //first lets create a new element to add to our array var addSpan = $('addtoarray'); //now lets create an array to combine with our array var addMany = $$('.addMany'); //now we can include the new span myArray.include(addSpan); //and combine our addMany array with myArray myArray.combine(addMany); //create a function to go through each ITEM in the array var myArrayFunction = function(item) { //item now refers to the current element within the array item.setStyle('background-color', '#eee'); } //now you call the myArrayFunction for EACH item within the array myArray.each(myArrayFunction);
<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>This tutorial does not begin to cover the wonderful things you can do with arrays, but hopefully it has given you an idea of what Mootools has to offer. To find out more about arrays, take a closer look at:
Includes a simple html file, the Mootools 1.2 core, an external JavaScript file, a css file and the example above.
Tomorrow we will look closer at functions and how to use them in Mootools.
For the next few days we are going to continue to cover the basics, but over the next few weeks we will move toward more complex projects, and I would love to hear what subjects are of the most interest to you all. Feel free to drop a note with any suggestions, comments or questions. Thanks and I hope you find this useful.
var myArrayFunction = function(purplepeopleeaters) {
purplepeopleeaters.setStyle('background-color', '#eee');
}
