Working with the DOM

With jQuery, you can actually traverse and handle the DOM itself instead of just dealing with the elements that are in the jQuery wrapper set (remember, these are no longer pure DOM elements in the array). In order to work directly with the DOM, you can use a few jQuery functions and properties. jQuery's documentation site itself has a pretty exhaustive list of 20 or 30 functions that you can use to help you traverse the DOM, though again working with WordPress, you most likely will not need to work directly with it. The ones I use most are actually part of the jQuery core and not found in the Traversing API, but I use them similarly to help me refine and navigate DOM objects.

Example

Syntax

Description

.length or size()

jQuery(" .length;

.post")

Returns the number of elements in the selected set.

.get(number-optional)

jQuery(" .get(3);

.post")

This will return the array of native DOM elements. Comes in handy if you don't want to deal with DOM directly and not the jQuery wrapped elements.

.find(selector)

jQuery(" .find(".

.post") entry b");

Returns an array of jQuery elements inside the first selector that match the find function's selector.

.each(functionName)

jQuery(".post") .each(function(){// code});

This will run a function on every element that matches the jQuery selector.

As these functions return numbers and arrays, you'll find them most useful for troubleshooting. To easily reference one of these functions, I simply set up alert() functions with my jQuery statements as follows:

alert("How many posts does this blog have? "+jQuery(".post").length);

jQuery(".post").each(function(){

alert("one alert for each .post")

You can see the resulting alert here in the following screenshot:

WordPress and jQuery just another WordPress site

The page at http://local host savs: How many .posts does this bfog page have? 3 "oo :

noil | II 1 ,'.\lll I' . .H J11 . II. tuifm qui 1,'IH 1 fl 1II I",, I ■ 11 . < 1111 .*■ 1.1

Be sure to take a look at the full traversing functions.

Again, the point of jQuery is to get you away from the details of the DOM, but as you get more sophisticated ^^ with your use of jQuery, you don't want to forget these functions are available to you at http://docs.jquery. com/Traversing.

You can also take a closer look at the jQuery core at http://docs.jquery.com/Core.

Was this article helpful?

0 0
Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment