4. jQuery Web Page Manipulation: Mod the DOM

The Webville Eatery wants an interactive menu

Alexandra, the head chef of the Webville Eatery, has a job for you. She’s been maintaining separate web pages for different versions of her menu: the regular menu and the menu with vegetarian substitutions. She wants you to make one page that will adjust the menu for the restaurant’s vegetarian customers.

Go vegetarian

Here’s what Alexandra would like you to do.

We want a Go vegetarian button that automatically substitutes the vegetarian options on our web page menu.

Here’s how our substitutions work:

We offer no substitutes for our fish entrées, so we need those removed.
We offer giant portobello mushrooms as a vegetarian substitute for our hamburgers.
We offer tofu as a vegetarian substitute for all of our meat and egg dishes except hamburgers.
We’ll need a button that restores the menu to its original state.

P.S. If you can pull it off, we’d also like a leaf icon to show up next to the substituted vegetarian entrees.

I had the web designer email you the files for the current menu so you can get started.

Note

There’s no exercise for it this time around—because you’re probably already thinking it—but be sure to write down what the requirements are in your own words so you know what you’re building here.

Before we write any jQuery, let’s look at the HTML and CSS files the web designer sent us, and see if their style and structure are up to snuff.

Brain Power

Regular web page structure (HTML) makes writing jQuery code much easier, but the ingredient elements we want to find aren’t labeled in a way that will make our jQuery code easier to write. How can we make our elements easier to select?

Class up your elements

As we’ve seen in each chapter so far, we can help jQuery find elements on web pages more effectively by setting up our HTML and CSS properly. To really make our structure sing, we should add classes and IDs to our style sheet and set our HTML elements’ attributes with the appropriate classes and IDs. This makes selecting elements easier and saves you coding time later on.

For jQuery, selectors aren’t just about controlling the look and feel of your page. Selectors allow jQuery to match (or query) elements on the page, too.

Button things up

Now that you’ve got things mostly set up, let’s go back to the napkin with the head chef’s requirements. Next up, you need to build two buttons.

— We want a Go vegetarian button that automatically substitutes the right vegetarian option on our web page menu.

— We’ll need a second button that restores the menu to its original state.

What’s next?

That was quick! You’ve got the two buttons set up. Let’s check those items off of the napkin and move on to the stuff that the Go vegetarian button needs to do.

— We want a Go vegetarian button that automatically substitutes the right vegetarian option on our web page menu.

— We’ll need a second button that restores the menu to its original state.

Here’s how our substitutions work:

We offer no substitutes for our fish entrées, so we need those removed.
We offer giant portobello mushrooms as a vegetarian substitute for our hamburgers.
We offer tofu as a vegetarian substitute for all of our meat and egg dishes except hamburgers.

In your own words, write the three things that the Go vegetarian button needs to do.

__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

In your own words, write the three things that the Go vegetarian button needs to do.

Match li elements of the fish class and remove those entrées from the menu.___________________
Match li elements in the hamburger class and replace them with portobello mushrooms._______
Match li elements in the meat class and replace them with tofu.________________________________

Note

Don’t worry if your answers were a bit different. Translating requirements into stuff that your web app needs to do takes practice.

Our next task is to tackle item 1 above: match li elements of the fish class and remove them from the menu. We matched elements with class selectors and used remove to take elements out of the DOM in Chapter 2.

jQuery also offers us the detach method. detach and remove both take elements out of the DOM. So what’s the difference between the two methods, and which one should we use?

Add the line of code for the third Sharpen Your Pencil solution inside the vegOn button click function in your my_scripts.js file. Then, open the page up in your favorite browser to make sure everything’s working.

The detach method definitely got rid of stuff, just not everything we wanted to remove. We removed the list element of the entrée. What we need to do is to remove the entire entrée inside which the .fish list element is nested.

How do we tell the DOM to detach the entire entrée?

Swinging through the DOM tree

In Chapter 1, we learned that the DOM is built like a tree. It has a root, branches, and nodes. The JavaScript interpreter in a browser can traverse (and then manipulate) the DOM, and jQuery is especially good at it. DOM traversal simply means climbing up and down and across the DOM.

We’ve been manipulating the DOM since Chapter 1. The detach method we just looked at is an example of DOM manipulation (i.e., we dynamically take elements out of the DOM).

But what is traversal really all about? Let’s take one section of the menu and visualize it as a DOM tree to see how traversal works.

Traversal methods let you select an element and grab other elements above, below, or beside it.

Let’s take a closer look at how you can grab those elements.

Traversal methods climb the DOM

To tell the DOM that we want to detach entrées whose menu lists contain fish, we have to reference elements by their relationship. jQuery’s traversal methods allow us to get at those element relationships.

Brain Power

Which of these methods can help us detach menu entrées with elements in the fish class?

Chain methods to climb farther

What if we want to climb higher, lower, or deeper? Strap on the chains, man! jQuery offers us method chaining. Method chaining lets us manipulate and traverse our pages in a more effective way. Here’s how it works:

Go to http://www.thinkjquery.com/chapter04/traversal/ and open the JavaScript console in your favorite browser’s developer tools. The Read me section at the front of the book covers browser developer tools. Run each of the four traversal methods along with the chained detach method as shown below. Then, write why or why not this will help us with the problem at hand.

Important: Make sure to refresh the browser after running each statement.

$(".menu_entrees").children().detach()
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________


$(".menu_list").children().detach()
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________


$(".fish").parent().detach()
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________


$(".fish").parent().parent().detach()
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________

Go to http://www.thinkjquery.com/chapter04/traversal/ and open the JavaScript console in your favorite browser’s developer tools. Don’t remember how to use browser dev tools? Head back to the Read me section of the book to refresh yourself. Run each of the four traversal methods along with the chained detach method as shown below. Then, write why or why not this will help us with the problem at hand.

Important: Make sure to refresh the browser after running each statement.

$(".menu_entrees").children().detach()

This traversal method detaches the children element of menu_entrees. It won’t work for removing entrées that contain fish because it removes ALL of the entrée lists. Crud! Not what we needed.

$(".menu_list").children().detach()

This traversal method detaches the children element of .menu_list. It won’t work for removing entrées that contain fish because it removes the list of ingredients from every ul.menu_list. Oops! Not what we wanted at all.

$(".fish").parent().detach()

This traversal method detaches the parent element of .fish. It won’t work for removing entrées that contain fish because it doesn’t go far enough up the DOM tree. Instead, it removes the ul.menu_list (and everything below it).

$(".fish").parent().parent().detach()

This traversal method detaches the parent of the parent element of .fish. It does just what we need it to do.

Right. We can’t just detach the fish entrées and forget about them.

We’ll have to rethink our code a bit to make this work.

Brain Power

We need to bring back the fish entrées later. What should we do with them?

We’ve seen quite a few jQuery and JavaScript constructs so far. Which ones do we need so that we don’t forget the .fish class elements? Write a “Yes” or “No” in the “Should we use it?” column for each, and explain why you chose or didn’t choose it. We did one for you, so now you’re down to three.

	Should we use it?	Why?
Terminator	No	A terminator simply ends a statement. It won’t solve the problem of remembering the detached elements.
Variable
Function
Selector

We’ve seen quite a few jQuery and JavaScript constructs so far. Which one do we need so that we don’t forget the .fish class elements? Write a “Yes” or “No” in the “Should we use it?” column for each, and explain why you chose or didn’t choose it. Here’s our solution.

	Should we use it?	Why?
Terminator	No	A terminator simply ends a statement. It won’t solve the problem of remembering the detached elements.
Variable	Yes	A variable stores stuff for us. If we store the detached elements, we can bring them back later by simply referencing the variable.
Function	No	A function lets us perform manipulations on data. The problem with the detached elements is a problem of storing data, not manipulating it.
Selector	No	A selector selects elements based on what’s in the DOM. We’ve already selected our elements. What we need is a way to store those elements.

Q:
Q: I get remove and detach, but what if I just want to get rid of something inside an element and not the element itself?
A:
A: To get rid of the content in an element, you can use the empty method. Let’s say you want to delete all of the stuff inside the paragraphs on a page; just do this: $("p").empty();.
Q:
Q: Is there a way to traverse all of an element’s parent elements?
A:
A: Yes. In addition to the parent method, jQuery also offers the parents method, which lets you traverse all of the selected element’s parent elements. You’ll see this method in action later in this chapter.
Q:
Q: What if I want to get the parent element nearest to the selected element?
A:
A: You can use the closest method. Like the parents method, the closest method will climb through an element’s parent elements, but it stops when it finds a match. For example, if you want to find the closest ul above a list item, use this: $("li").closest("ul").
Q:
Q: I know about next and previous, but what if I want to traverse all of the elements on the same level of the DOM tree?
A:
A: Fortunately, the jQuery team has thought of that one, too. The siblings method will traverse all of the elements at the same level as the selected element.
Q:
Q: Does Google Chrome have jQuery built in?
A:
A: No. The reason we can run jQuery in Chrome’s browser dev tools is that we’ve included jQuery in the HTML page. If you visit a web page that doesn’t use jQuery, don’t expect the Chrome JavaScript console to run jQuery statements.

Variables can store elements, too

Variables must be pretty useful because we find ourselves needing them again. We’ve seen variables throughout the first three chapters, but we’ve only used them to store numbers and text strings. Wouldn’t it be convenient if JavaScript variables could store our elements too? As it turns out, they can.

The browser will hold those elements in memory temporarily. If we want to keep them to use in our program later, it’s a good idea to put them into a variable. But how do we do that?

There’s that dollar sign again...

Storing our elements is simple. We create a variable, just as we have for numbers and text strings, and set the variable (using the equals sign) to the statement that returns elements. But wouldn’t it be good to know when the variable is storing special stuff like elements (versus just numbers or text strings)? It’s common practice among jQuery coders to place a dollar sign in front of a variable that will be used to store elements returned from jQuery. That way, anyone else who looks at our code knows that we are using the variable to store stuff that we got from jQuery.

It is messy to store different elements in a variable.

That’s why jQuery uses JavaScript arrays to store elements. Let’s see what arrays are all about.

Expand your storage options with arrays

Any time we select elements from the DOM and store them in a variable, jQuery returns the data as an array. An array is simply a variable with greater storage options.

We can put stuff in and take things out of each storage slot. To put the value “15” into the third slot, we would write this:

Geek Bits

Arrays don’t have to start with a dollar sign ($). The practice of indicating a jQuery array with a dollar sign is a coding convention of jQuery developers.

Store elements in an array

When we select and detach the li elements and set a variable ($f) to the result, jQuery takes the elements the DOM returns and stores them neatly for us in a JavaScript array. When we want to put those elements back with the restore button, our job will be way less messy.

$f = $(".fish").parent().parent().detach();

jQuery takes the elements the DOM returns and stores them neatly for us in an array.

Relax

There’s a lot more to arrays.

But you don’t need to worry about that too much right now. We’ll get into a bunch more detail on arrays in Chapter 6.

Add the line of code on the previous page, which will detach the parents of the parents of the #fish elements, inside the vegOn button click function in your my_scripts.js file. Then, open the page up in your favorite browser to make sure everything’s working.

You did it. Now let’s update the checklist.

	1.	Match li elements of the fish class and remove those entrées from the menu.
	2.	Match li elements in the hamburger class and replace them with portobello mushrooms.
	3.	Match li elements in the meat class and replace them with tofu.

Next up, you need to find entrées that contain hamburger and replace the hamburger with portobello mushrooms.

Brain Power

We’ve seen how to take elements out of the DOM, but how do we dynamically replace DOM content with different content?

Change out elements with replaceWith

The replaceWith method allows you to replace selected element(s) with new ones. Whenever you want modify the DOM by exchanging one thing for another, you can use this handy jQuery method. Let’s say we want to dynamically change the heading level 2 element that says “Our Menu” to a heading level 1 that says “My Menu.” Here’s how you can do it using the replaceWith method:

How can replaceWith help?

You need to match li elements in the hamburger class and replace them with an li element of the portobello class. Let’s think about that problem before we write our code.

Think ahead before using replaceWith

What’s next on the checklist?

	1.	Match li elements of the fish class and remove those entrées from the menu.
	2.	Match li elements in the hamburger class and replace them with portobello mushrooms.
	3.	Match li elements in the meat class and replace them with tofu.

You need to find entrées in the meat class and replace them with tofu.

Actually, we can’t use replaceWith for this one.

Brain Power

jQuery’s replaceWith method is straightforward and powerful, but unfortunately, it won’t help us solve this one. Why not?

replaceWith doesn’t work for every situation

The replaceWith method works well when you have a one-to-one replacement like exchanging the hamburger class for portbello class.

One–to–many substitution

But the scenario of trading out elements for the next item on our checklist isn’t one for one. We have to replace many different kinds of ingredients (i.e., turkey, eggs, steak, lamb chops) with one ingredient (tofu).

Many–to–one substitution

But when we want to select tofu and replace it later, we have a problem. When we want to put the different kinds of meat back in, the DOM has forgotten about them.

We could replace tofu with just one of the types of meat, but that’s not what we wanted at all.

So we’ll need to accomplish this menu substitution in two steps:

Insert li elements of the tofu class into the DOM after the meat elements.
Detach the elements of the meat class and hold them in a variable.

Insert HTML content into the DOM

Up to this point, we’ve either removed or replaced elements in the DOM. Fortunately for us, the creators of the jQuery library gave us many ways to insert stuff into the DOM. The ones we’ll look at are before and after.

before inserts content before the selected element.

after inserts content after the selected element.

You’ve accomplished each of the steps for the Go vegetarian button:

	1.	Match li elements of the fish class and remove those entrées from the menu.
	2.	Match li elements in the hamburger class and replace them with portobello mushrooms.
	3.	Match li elements in the meat class and replace them with tofu.

Up next, we need to build the “Restore Menu” button. Here’s what that button needs to do.

	Put the fish entrées back into the menu where we removed them (i.e., before the first menu item in the left column).
	Find entrées that contain portobello mushrooms and replace them with hamburger.
	Find entrées that contain tofu and replace them with the different kinds of meat (in the right order).

Let’s dig right in and look at what we need to do for the first one.

We know how to use before, but how do we specify the first child?

Use filter methods to narrow your selections (Part 1)

Fortunately, jQuery provides filtering methods that let us narrow our selection for problems like finding the first child. Let’s look at six of them (three on this page, three on the next).

`first`	`eq`	`last`
The `first` method will filter out everything but the first element in a selected set of elements.	The `eq` method will filter out everything but the element whose index number is equal to what you put in the parentheses in a selected set of elements.	The `last` method will filter out everything but the last element in a selected set of elements.

Let’s look at one item from our menu to see how these methods work:

Use filter methods to narrow your selections (Part 2)

Now let’s check out the slice, filter, and not methods, and how they work.

`slice`	`filter`	`not`
The `slice` method will filter out everything but elements with an index between the index numbers you put in its parentheses.	The `filter` method will filter out everything but elements that match the selector you put in its parentheses.	The `not` method will filter out everything that does not match the selector you place in the parentheses.

The filter and not methods let us use selectors to create a subset from the matched set using selectors as arguments of their methods.

Which of these methods will help you specify the first child on the menu?

Write the line of jQuery code that will put the fish entrées back into the menu where we removed them (i.e., before the first menu item below menu_entrees.

......................................before($f);

Bring the burger back

So far for the “Restore Menu” requirement, we’ve got one item down, two to go:

	Put the fish entrées back into the menu where we removed them (i.e., before the first menu item in the left column).
	Find entrées that contain portobello mushrooms and replace them with hamburger.
	Find entrées that contain tofu and replace them with the different kinds of meat (in the right order).

Our next checklist item seems a bit like déjà vu, doesn’t it? All we really need to do is reverse what we did for the original substitution. Why? Because we’re dealing with a one-to-one substitution, and we love one-to-one substitutions because they’re logically simple.

Where’s the beef (er...meat)?

We’re down to our last item for the “Restore Menu” button:

	Put the fish entrées back into the menu where we removed them (i.e., before the first menu item in the left column).
	Find entrées that contain portobello mushrooms and replace them with hamburger.
	Find entrées that contain tofu and replace them with the different kinds of meat (in the right order).

What did we do with those li.meat elements again? Let’s review:

We put li.tofu elements into the DOM after the meat elements.

$(".meat").after("<li class='tofu'><em>Tofu</em></li>");

Then, we detached the li.meat elements but held on to them by saving them into $m.

$m = $(".meat").detach();

So where are those elements, and how do we bring them back?

A meaty array

Remember that whenever we store jQuery elements, we give the variable a dollar sign to signify that the variable we’re using has a special kind of storage. In this case, it’s a jQuery array, and here’s how the elements in $m are stored:

Brain Power

You need to put each li.meat element back in for each li.tofu element. You’ve seen many methods that put elements into the DOM. Which method would you use for this one?

The each method loops through arrays

In Chapter 3, you saw how to use the each method to loop through elements. We can use it again here to loop through all the meat elements in the $m array and put them back where they were. But to do that, we’ll need to check out a bit more about how the each method works.

The each method is like an assembly-line machine for your elements.

That’s it...right?

You did everything required for the “Restore Menu” button. Let’s update our files and call this project done.

	Put the fish entrées back into the menu where we removed them (i.e., before the first menu item in the left column).
	Find entrées that contain portobello mushrooms and replace them with hamburger.
	Find entrées that contain tofu and replace them with the different kinds of meat (in the right order).

P.S. If you can pull it off, we’d also like a leaf icon to show up next to the substituted vegetarian entrées.

Oops, you’re right.

Luckily, the web designer already put the veg_leaf class in the my_style.css file. Let’s have a look at it.

Q:
Q: I get the other filter methods, but slice still confuses the heck out of me. Can you give me a more in-depth explanation of it?
A:
A: The slice method can be confusing. The most confusing thing about slice are its parameters: slice(start, end).
The first parameter is the start parameter, and you have to include it, or slice won’t work. The start parameter tells where to start the selection within an array of elements. Remember that the first element in an array has a “zero index,” which means you have to start counting at 0. The start parameter will also take a negative number. If you put in a negative number, slice will start counting backward from the end of the array rather than forward from the beginning.
Q:
Q: OK, so what does the end parameter of the slice method do?
A:
A: The slice method’s second parameter, the end parameter, is not required. If you don’t include it, slice will select all elements from whatever the start parameter is set to and will select all of the elements in the array that are greater than the start parameter. The end parameter can be counterintuitive if you don’t remind yourself that the array starts counting at 0.
Q:
Q: The each method seems pretty powerful. How does each know what element it’s working on?
A:
A: The real power comes from combining each with the this keyword. The each method keeps track of its index automatically and “knows” which element it’s working on. You should only use each when you’ve selected multiple elements. To reference the current element, you use this but wrap it with the jQuery shortcut: $(this).
Q:
Q: Why do I have to put the “i” or “index” inside the each function?
A:
A: The index variable, often called “i” or “index,” is used by the each function to keep a count of the element each is working on. That way, the each function knows when it’s done processing. If each didn’t have an index variable, it wouldn’t know which function to work on and it wouldn’t be able to stop.
Q:
Q: How can I find elements within a jQuery array?
A:
A: You can find elements within a jQuery array using the find method. Let’s say you have an array of li elements in a jQuery array:
var $my_elements = $("li");
Now, you want to find all of the anchor elements in that array. Here’s what you do:
$my_elements.find("a");
Q:
Q: Does jQuery give us a way to wrap an element inside of another element?
A:
A: Indeed, it does. Let’s say you want to surround an image with an ID of oreilly inside of an anchor element. Here’s how you do it:
$("img#oreilly").wrap("<a href='http://www.oreilly.com'></a>");

Your jQuery Toolbox

You’ve got Chapter 4 under your belt and now you’ve added DOM manipulation and traversal, arrays, and filters to your toolbox.

DOM manipulation

You can add to, replace, and remove things from the DOM at will:

detach

remove

replaceWith

before

after

Arrays

jQuery arrays store all kinds of things, including elements, so you can access them later.

Just like with variables, put a $ in front of your array to signify that it is storing special jQuery goodies.

DOM traversal

This is all about climbing around the DOM tree so you can manipulate it.

You use element relationships with associated methods like parent and child to get where you want.

Chaining methods is an efficient way to traverse the DOM quickly.

Filters

Filter methods help you narrow down a set of selected elements:

first

equal

last

slice

filter

not

Chapter 4. jQuery Web Page Manipulation: Mod the DOM

The Webville Eatery wants an interactive menu

Go vegetarian

Note

Brain Power

Class up your elements

Button things up

What’s next?

Note

Swinging through the DOM tree

Traversal methods climb the DOM

Brain Power

Chain methods to climb farther

Brain Power

Variables can store elements, too

There’s that dollar sign again...

Expand your storage options with arrays

Geek Bits

Store elements in an array

Relax

Brain Power

Change out elements with replaceWith

How can replaceWith help?

Think ahead before using replaceWith

Brain Power

replaceWith doesn’t work for every situation

One–to–many substitution

Many–to–one substitution

Insert HTML content into the DOM

Use filter methods to narrow your selections (Part 1)

Use filter methods to narrow your selections (Part 2)

Bring the burger back

Where’s the beef (er...meat)?

A meaty array

Brain Power

The each method loops through arrays

That’s it...right?

Your jQuery Toolbox

DOM manipulation

Arrays

DOM traversal

Filters

Don’t leave empty-handed

It’s yours, free.

Check it out now on O’Reilly