• Choose a category
• All
• Classic-Fiction

By Root 1535 0

a node through chaining.

Note that the paragraphs are inside content. Of course, I could have put them elsewhere with careful use of selectors, but I put them where I want them.

It’s hard to keep track of changes to the page because a standard view source command shows you the original source code, not the code that’s been changed by your jQuery magic. jQuery changes the HTML of your page in memory but doesn’t change the text file that contains your page. If your page is not doing what you expect, you need to look at the script-generated source code to see what’s really going on.

Firefox plugins are the key to headache-free debugging. The Web developer toolbar has a wonderful feature called View Generated Source (available on the View Source menu) that shows the page source as it currently exists in memory. If you prefer the firebug extension, its Inspect mode also inspects the page as it currently is displayed. Both tools are described in Book I, Chapter 3.

Note that the content of the first paragraph is cloned with its current content and style information copied to the new element. If you clone the paragraph and then add content to it and clone it again, the first clone will have the default text and the second clone will contain the additional text. If you modify the CSS style of an element and then clone it, the clone will also inherit any of the style characteristics of the original node.

It’s a wrap

Sometimes you want to embed an object inside another element (or two). For example, the wrap button on the changeContent page surrounds each cloned paragraph with a

pair. I’ve defined the div tag in my CSS to include a red border. Repeatedly clicking the wrap button surrounds all cloned paragraphs with red borders. This would be a very tedious effect to achieve in ordinary DOM and JavaScript, but jQuery makes it pretty easy to do:

function wrap(){

$(“p:gt(0)”).wrap(“

”);

} // end wrap

The wrap method is pretty easy to understand. If you feed it any container tag, it wraps that container around the selected node. You can also use multiple elements, so if you wanted to enclose a paragraph in a single item list, you could do something like this:

$(“p”).wrap(“

”);

The resulting code would surround each paragraph with an unordered list and list item.

Returning to the wrap function, I’ve decided not to wrap every paragraph with a div, just the ones that have been cloned. (Mainly I’m doing this so that I can show you some other cool selection filters.) The p:gt(0) selector means to select all paragraphs with an index greater than 0. In other words, ignore the first paragraph, but apply the following methods to all other paragraphs. You also find these filters:

♦ Less-than (:lt) isolates elements before a certain index.

♦ Equals (:eq) isolates an element with a certain index.

Alternating styles

It’s a common effect to alternate background colors on long lists or tables of data, but this can be a tedious effect to achieve in ordinary CSS and JavaScript. Not surprisingly, jQuery selectors make this a pretty easy job:

function oddGreen(){

//turn alternate (odd numbered) paragraph elements green

$(“p:odd”).css(“backgroundColor”, “green”)

.css(“color”, “white”);

} // end oddGreen

The :odd selector only chooses elements with an odd index and returns a jQuery node that can be further manipulated with chaining. Of course, you also see an :even selector for handling the even-numbered nodes. The rest of this code is simply CSS styling.

Resetting the page

You need to be able to restore the page to its pristine state. A quick jQuery function can easily do the trick:

function reset(){

//remove all but the original content

$(“p:gt(0)”).remove();

$(“div:not(#content)”).remove();

//reset the text of the original content

$(“#content”).html(“

This is the original content

”);

} // end reset

This function reviews many of the jQuery and selection tricks shown in this chapter:

1. Remove all but the first paragraph.

Any paragraph