JQuery: working with the wrapped HTML elements – part I

As we’ve seen, JQuery offers a powerful selector syntax. Working with the JQuery involves a couple of easy steps: we start by getting a JQuery object which wraps one or more HTML nodes. Then, we can start invoking one of the available JQuery object. In this post, we’ll see how we can interact with the wrapped element set.

One of the things you can do is get the number of wrapped elements. You can do this in two ways. First, you can take advantage of the fact that JQuery objects are similar to arrays. That means it has a length property which returns the number of wrapped nodes. The other option you have is to use the JQuery’s  size method. here’s some code that shows how to do that:

var size = $(“a”).length;
var size = $(“a”).size();

Getting a reference to a wrapped element can also be done in two ways:

• you can use the [] operator. For instance, here’s an expression which returns a reference to the 1st wrapped anchor: $(“a”)[0];
• JQuery does also expose a method for getting a reference to a wrapped element. Here’s how you can get the first item of the wrapped set through this method: $(“a”).get(0);

Interestingly, if you don’t pass get a position to an element, you’ll get a reference to the array that contains the complete wrapped set (ex.: $(“a”).get() returns an array with all anchors nodes defined on the page).

One of the things you might be asking is if you can add new elements to the existing node set. The answer is yes. This is really cool for those scenarios where you want to apply action A to a smaller set of items and then you’d like to run action B on the previous set + other elements. Adding elements can be achieved through the add method. You can pass a string (which might be a selector or an HTML snippet) or a reference to a DOM node (or an array of DOM nodes).

Calling add results in interacting with several JQuery methods. The final result doesn’t include duplicated elements and consists on merging the existing wrapped set with the one that is obtained from the value passed to the add parameter (btw, this method relies in several JQuery helper or utility methods which we’ll talk about in future posts).

Here’s a quick example of how you can use this method:

$(“a”).add(“p”).XXX()

The previous expression starts by creating a new JQuery object which wraps all existing anchors. Then, it will merge that set with all the paragraphs if finds on the page. Notice that future method calls (represented by XXX in the previous snippet) will apply to all the anchors and all the paragraphs wrapped by the JQuery object obtained after the add invocation.

Now, I guess that you might be asking how to remove that last set of items from the initial one. Glad you’re asking that. that’s why we’ve got an end method! For instance, the next snippet returns the initial JQuery object that wrapped all the anchors:

$(“a”).add(“p”)….end()

The end method is really simple and returns the “previous” JQuery object. This is only possible because each JQuery object  has a field (called prevObject) which points to the previous JQuery object when an instance method returns a new JQuery object.

When you call a method like add, you’ll end up returning a new JQuery object with the prevObject field pointing to the initial JQuery object. Notice that if you combine several JQuery objects (for instance, by calling add  several times), then you can call several times end for getting the previous JQuery object. For instance, take a look at the following code:

$(“a”).add(“p”).end().end()

What do you think will happen in this? Probably not what you expected, but the correct answer is a JQuery object that wraps the document element. Notice that you can keep calling end more times but you’ll always get an “empty“ JQuery object.

btw, there’s also a not method which we can  use to remove nodes from the wrapped set. For instance, the next snippet returns only the options which are not selected:

$("option").not("[selected]")

Besides passing a selector, you can also pass a reference to an element or an array of HTML nodes. In that case, those items will be removed from the wrapped set.

And I guess that’s all for today. Time to return to the beach :)  Keep tuned for more on JQuery!