Hour 8. Navigating and Manipulating jQuery Objects and DOM Elements with jQuery
What You’ll Learn in This Hour:
Chaining jQuery operations together for efficiency
Ways to filter the DOM elements in a jQuery object
Methods to use jQuery objects to traverse the DOM
Iterating through each element in the jQuery object set
jQuery selectors return a jQuery object that represents zero or more elements that match the selector definition. Simple selectors are great for a lot of different things. However, as your web pages become more complex, you will find that the selectors do not do everything that you need.
jQuery objects provide additional functionality and enhance the selector results by allowing you to easily refine the list of DOM elements represented, navigate the DOM tree to find other elements, and manipulate the values of the HTML elements. The following sections cover how to chain jQuery operations together to efficiently find, filter, and navigate around the DOM elements in the web page.
Chaining jQuery Object Operations
One of the great things about jQuery objects is that you can chain multiple jQuery operations together into a single statement. Each consecutive statement will operate on the results of the previous operation in the chain. This can help reduce and simplify your selectors and reduce the amount of class and ID definitions required in your CSS.
Think of the results of the chained jQuery operations as a stack of jQuery objects, with each object representing a set of DOM elements. Each operation in the chain will place a jQuery object onto the stack, but the current operation will be applied only to the top jQuery.
To help illustrate this, consider the following statements. The code first finds the <div> element with id="content" and then finds the first <p> element inside and changes the font-weight to bold. Then it finds the <span> elements inside the <p> and sets the color to red:
var $contentDiv = $("div#content");
var $firstP = $contentDiv.children("p:first");
$firstP.css("font-weight","bold");
var $spans = $firstP.children("span");
$spans.css("color","red");
The code above took five lines to accomplish all the tasks it does. The following single line of chained jQuery operations does the same things but with only a single line:
$("div#content").children("p:first").css("font-weight","bold").children("span"). css("color","red");
Because each of the operations return a jQuery object, you can chain as many jQuery operations together as you would like. Even though the .css() operation is designed to alter the DOM objects and not find them, it still returns the same jQuery object so you can perform other operations on the results.
Filtering the jQuery Object Results
jQuery objects provide a good set of methods that allow you to alter the DOM objects represented in the query. Reducing the results is helpful when you are trying to pinpoint a specific set of elements within a jQuery selector result. Table 8.1 provides some examples of chaining jQuery selectors.
The jQuery selectors that are the same as the CSS selectors are able to use the native DOM method querySelectorAll(), which has some advanced optimizations on DOM objects. Other jQuery selectors cannot take advantage of that optimization, so it is better to use a CSS-based selector first and then add the filter as a chained selector. For example, rather than using $("div:animated"), you should use $("div").filter(":animated). http://api.jquery.com/category/selectors/jquery-selector-extensions/
Traversing the DOM Using jQuery Objects
Another important set of methods attached to the jQuery object are the DOM traversing methods. DOM traversal enables you to select elements based on their relationship to other elements.
The DOM is sometimes referred to as the DOM tree because it is organized in a tree structure, with the document as the root and nodes that can have parents, siblings, and children. To visualize this better, check out the following HTML code:
<body>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
The <p> element and <ul> element are siblings to each other, and they are all children of the <div> element. The <div> element is the parent of the <p> and <ul> elements, and the <ul> element is the parent of the <li> elements, and so forth.
jQuery DOM traversing methods enable you to move from one layer in the DOM to another to select elements—for example, if you want to access all <p> elements that are children of <div> elements, or if you want to find a <label> element that is a sibling of an <input> element.
jQuery objects provide an incredible set of methods that allow you to traverse the DOM in almost innumerable ways by allowing you to use the current selection of DOM elements in the jQuery object to select other sets of DOM elements in the tree. Table 8.2 lists the methods that you can use to traverse the DOM.
Looking at Some Additional jQuery Object Methods
When filtering the jQuery object or using it to traverse the DOM, there are some additional methods that you should be aware of. Table 8.3 lists a set of methods that you can use in conjunction with filtering and traversing elements, to iterate through the DOM elements in the jQuery object, add additional elements to the set, end filtering, and test items. You will find that you’ll use these methods more and more frequently as your jQuery code becomes more natural to you.
Note
When using functions with jQuery methods that iterate through the DOM elements, you can use the this keyword to access the current DOM object that is being iterated on. This is a DOM object and not a jQuery object. If you need to use the jQuery form of the DOM object, then use $(this) instead. Keep in mind, though, that it takes work in the browser’s rendering engine to build the jQuery form of the DOM object, so create the jQuery form only if you want the functionality that is provided.
Using .each()
The .each(function) method is one of the most important jQuery object methods because it allows you to traverse all elements in the jQuery set and perform actions on each of them individually. This is different from just applying the same action to all items in the query.
The .each() method allows you to specify a function that will be run for each element in the jQuery object set. The function will be passed an index number as the first argument. Inside the function, the this variable will point to the current DOM element.
The following snippet of code illustrates using .each(). It iterates through all paragraph elements and sets the content, including the index number of the element:
$("p").each(function (idx){
$(this).html("This is paragraph " + idx);
});
Notice that idx is passed in as an index number, 0 for the first <p> element, 1 for the second, and so on. Also note that this was converted to a jQuery object using $(this) so that the .html() method could be called.
Using .map()
The .map(function) method also iterates through each element in the jQuery object set. Although very similar to .each(), there is one big difference, which is that .each() will return the same jQuery object, but .map() will return a new jQuery object with the values returned by each iteration.
The following snippet of code illustrates using .map(). It will iterate through all <li> elements and return a comma-separated string of the elements’ text:
var liValues = $("li").map(function (idx){
return $(this).html();
}).get().join(",");
Notice that for each iteration, the function returns the HTML content in the <li> element. You call .get() to return a JavaScript array version of the new jQuery object returned by .map() and then call .join(",") on that array to build the comma-separated string.
Try it Yourself: Using the jQuery .map() and .each() Methods to Navigate, Access, and Manipulate the DOM Elements
1. In Aptana, create a source folder named hour08. Inside the hour08 folder, create a js and css folder.
2. In the hour08 folder, create the source files named hour0801.html, js/hour0801.js, and css/hour0801.css.
3. Open hour0801.html and add the usual basic elements (html, head, body).
4. Inside the <head> element, add the following <script> and <link> elements, shown in Listing 8.1-html, that will be used to load the jQuery, JavaScript, and CSS:
06 <script src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour0801.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour0801.css">
5. Add the code shown in lines 11–19 of Listing 8.1-html to the css/hour0801.css file. This code defines two input buttons, a bunch of <p> elements, and a <div> that will be used to place content.
6. Add the styling code from Listing 8.1-css to the hour0801.css file. The styling code will style the <span> elements so that they will display as inline-block so that you can set their size.
7. Open the js/hour0801.js file and add the following lines that will create a .ready() function that will be executed when the page is loaded:
01 $(document).ready(function (){
. . .
21 });
8. Add the following code that will add a click event handler to the first button. The function uses a simple .each() function to iterate through the <p> elements; it gets the string, splits it into a color and size, and then sets the font-size and color CSS properties.
02 $("input:eq(0)").click(function (){
03 $("p").each(function(){
04 var parts = $(this).html().split(" ");
05 $(this).css({"font-size":parts[1]+"px", color:parts[0]});
06 });
07 });
9. Add the following code that will add a click event handler to the second button. The function uses a simple .map() function to iterate through the <p> elements; it gets the string and splits it into a color and size. This time, however, the function returns a JavaScript object with a color and size attribute. The .get() at the end converts the results of the .map() to a JavaScript array named items.
08 $("input:eq(1)").click(function (){
09 var items = $("p").map(function(){
10 var parts = $(this).html().split(" ");
11 return {color:parts[0], size:parts[1]};
12 }).get();
10. Add the following for loop that iterates through items and creates a new <span> element with the color and size based on the values read from the <p> elements:
13 for (var idx in items){
14 var item = items[idx];
15 var span = $("<span>" + item.color + "</span>");
16 var size = item.size*5;
17 span.css({"background-color":item.color, "font-size": item.size+"px", width:size, height:size});
18 $("div").append(span);
19 }
11. Save the three files and open the HTML document in a web browser. When you click the .each() button, the text of the <p> elements should change, as shown in Figure 8.1. When you click the .map() button, new boxes should be displayed in the <div>.
FIGURE 8.1 A simple JavaScript web page that uses .map() and .each() to read the text in <p> elements and make dynamic changes to the web page for each of those elements.
LISTING 8.1-html HTML File That Loads jQuery and JavaScript
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 8-1</title>
05 <meta charset="utf-8" />
06 <script type="text/javascript" src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour0801.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour0801.css">
09 </head>
10 <body>
11 <input type="button" value=".each()">
12 <input type="button" value=".map()">
13 <p>red 15</p>
14 <p>blue 30</p>
15 <p>gray 20</p>
16 <p>black 40</p>
17 <p>yellow 15</p>
18 <p>green 35</p>
19 <div></div>
20 </body>
21 </html>
LISTING 8.1-js jQuery and JavaScript Code Gets the <p> Elements and Iterates Through Them Using .map() and .each() to Apply Different Changes for Each Element
01 $(document).ready(function (){
02 $("input:eq(0)").click(function (){
03 $("p").each(function(){
04 var parts = $(this).html().split(" ");
05 $(this).css({"font-size":parts[1]+"px", color:parts[0]});
06 });
07 });
08 $("input:eq(1)").click(function (){
09 var items = $("p").map(function(){
10 var parts = $(this).html().split(" ");
11 return {color:parts[0], size:parts[1]};
12 }).get();
13 for (var idx in items){
14 var item = items[idx];
15 var span = $("<span>" + item.color + "</span>");
16 var size = item.size*5;
17 span.css({"background-color":item.color, "font-size": item.size+"px",
18 width:size, height:size});
19 $("div").append(span);
20 }
21 });
22 });
LISTING 8.1-css CSS Code That Styles the <span> and <p> Elements
1 p{margin:0; padding:0;}
2 span{
3 display:inline-block;
4 color: white;
5 text-align:center;
6 }
Try it Yourself: Using jQuery Objects to Traverse the DOM
1. In the hour08 folder, create the source files named hour0802.html, js/hour0802.js, and css/hour0802.css.
2. Open hour0802.html and add the usual basic elements (html, head, body).
3. Inside the <head> element, add the following <script> and <link> elements, shown in Listing 8.2-html, that will be used to load the jQuery, JavaScript, and CSS:
06 <script src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour0802.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour0802.css">
4. Add the code shown in lines 11–25 of Listing 8.2-html. This code defines a set of <div> elements containing a label, a text input, and a set of 5 <span> elements. The onkeyup="update()" attribute of the <input> elements provides the dynamic interaction when the user types into the text box.
5. Add the styling code from Listing 8.2-css to the hour0802.css file. The styling code styles the <span> elements with a certain height and width and adds the margin and padding necessary.
6. Open the hour0802.js file in Aptana and create a JavaScript function named update() to be called by the onkeyup event handler.
7. Add the following line to set the background-color of all <span> elements to lightgrey:
2 $("span").css("background-color","lightgrey");
8. Add the following jQuery code to select all <div> elements, and then use .each() to iterate on each of them and apply a function:
3 $("div").each(function(i){
...
8 })
9. Inside the function, add the following line that gets the first <input> child of the <div> element:
4 var $input = $(this).children("input:first");
10. Add the following lines that get the value of the <input> element and create a jQuery selector string to filter on only the first n number of <span> elements, where n is the value of <input>:
5 var $value = $input.val();
6 var filter = "span:lt(" + $value + ")";
11. Add the following line that uses the $input jQuery object to search for siblings based on the filter defined in step 10. The css() method changes the background color to blue. Notice the simplicity of the function. You can add as many <div> sections as you want. As long as they follow the same structure <div><input><span>...</div>, the jQuery code will work on all of them.
7 $input.siblings(filter).css("background-color","blue");
12. Save the files and open hour0802.html in a web browser. Notice that as you type in the text boxes, the <span> elements are changed to blue to match the value of the input, as shown in Figure 8.2.
FIGURE 8.2 A simple JavaScript web page that allows users to input a rating and dynamically changes based on the value typed in.
LISTING 8.2-html HTML File That Loads jQuery and JavaScript and Attaches Event Handler Elements to Provide User Interaction
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 8-2</title>
05 <meta charset="utf-8" />
06 <script type="text/javascript" src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour0802.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour0802.css">
09 </head>
10 <body>
11 <p>Rate you Experience 1-5</p>
12 <div>
13 <label>Speed</label>
14 <input type="text" onkeyup="update()"></input>
15 <span></span><span></span><span></span><span></span><span></span>
16 </div>
17 <div><label>Reliability</label>
18 <input type="text" onkeyup="update()"></input>
19 <span></span><span></span><span></span><span></span><span></span>
20 </div>
21 <div>
22 <label>Usability</label>
23 <input type="text" onkeyup="update()"></input>
24 <span></span><span></span><span></span><span></span><span></span>
25 </div>
26 </body>
27 </html>
LISTING 8.2-js JavaScript Code That Handles the Key Up Event and Uses jQuery to Manipulate the Color of the <span> Elements Based on the Input Value
1 function update(){
2 $("span").css("background-color","lightgrey");
3 $("div").each(function(i){
4 var $input = $(this).children("input:first");
5 var $value = $input.val();
6 var filter = "span:lt(" + $value + ")";
7 $input.siblings(filter).css("background-color","blue");
8 })
9 }
LISTING 8.2-css CSS Code That Styles the <span>, <input>, and <label> Elements
01 span{
02 display:inline-block;
03 height:15px;
04 width:10px;
05 background-color:lightgrey;
06 margin:1px;
07 border-radius:50%;
08 }
09 input {
10 width:20px;
11 }
12 label {
13 display:inline-block;
14 width:60px;
15 }
Summary
In this hour, you learned about using jQuery and JavaScript objects to find and navigate through the DOM elements. This adds a critical piece in implementing dynamic code because often you will want to act, not on the elements that you search for, but for elements related to them.
You learned how to chain jQuery requests together to apply multiple operations to the same set of DOM elements. This reduces the number of statements required in your scripts.
You also learn how to iterate through the DOM element set associated with the jQuery objects returned by the selector. This allows you to apply a different set of operations to each individual element in a set without the need to look each one up individually.
Q&A
Q. What is the difference between $("div:eq(n)") and $("div").eq(n)?
A. The biggest difference is that .eq() enables you to specify a negative number and count backward from the end. For example, .eq(-1) is the last element in the list. :eq() does not allow negative indexes.
Q. How many jQuery options should be chained together?
A. Good question. It depends on the circumstances. It is really a question of performance versus readability/reusability. Keep in mind that there is a bit of code behind each jQuery lookup, so the more you can use the same jQuery stack, the better off you are. At some point, what is really in the current stack can become confusing; however, at that point you should save yourself future headaches and move on. A better approach is to break the operations into separate groups that can be reused and then define variable names for those.
Workshop
The workshop consists of a set of questions and answers designed to solidify your understanding of the material covered in this hour. Try to answer the questions before looking at the answers.
Quiz
1. What jQuery method would you use to filter out elements that have a <p> element as a child?
2. What jQuery method would you use to get all sibling <p> elements before an element with id="middleEarth"?
3. What is the difference between .map() and .each()?
Quiz Answers
1. .has("p");
2. $("#middleEarth").prevAll("p");
3. .map() is used to iterate through the set of elements and return a new object containing the results of the specified function of each iteration. .each() will just iterate through the elements applying the function specified.
Exercise
1. Extend the HTML code in hour0801.html to include more <div> sections like the others. Notice that the same functionality is automatically applied to each.