Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
4. jQuery Web Page Manipulation: Mod the DOM > Go vegetarian
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:
|
|
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.
Dig into the current structure of the web menu by diagramming how the DOM sees it. Below, you’ll find all the element magnets you need to complete the tree. Using the HTML fragment for the menu on the right, complete the tree. Each magnet will fit where you see a hollow circle. We’ve done a few for you already.
It looks like all the ingredients are set up as child list items of the parent entrée list items. They aren’t really labeled very clearly or uniquely, now are they?
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?
