JQuery: working with the wrapped HTML elements – part II

Yesterday we’ve started looking at some JQuery methods which lets  us interact with the wrapped set. Today we’re going to keep looking at these methods and we’ll see how we can filter the current node set even further by using the filter method.

We’ve already met the filter method in the past when we took a peek at how selectors were processed internally by JQuery. Currently, the filter method receives one parameter. You can use a string if you’re interesting in using a selector expression as a parameter or you can pass a function if the selector won’t work for you in the current scenario.

If you decide to pass filter a method, then that method will be called for each item of the wrapped set. Inside the method, you can access the current node through the this expression. Here’s a simple example that shows how to use this method:

var b = $("input[type=text]").filter(
                     function() { return this.value === "luis"; });

As you can see, we’re using an anonymous function for filtering the items that should be returned. Notice that this references an HTML node contained on the wrapped set and not a JQuery object that wraps an existing HTML node.

If you needed this in a real world application you wouldn’t really use a filter method to do this. You could, for instance, use a selector expression that would do everything in one step or, if you really wanted to use the filter method, you could always pass it a selector expression . Here is some code that shows how you might end up with the same results:

var d = $("input[type=text][value=luis]");
var e = $("input[type=text]").filter("[value=luis]");

In a previous post, we’ve seen that we can get a reference to a wrapped element through the [] operator or by  using the get method. JQuery also allows us to get a new JQuery object that wraps a subset of the wrapped set container in the object through the slice method.

The method receives two parameters: the first, indicates the position from which elements should be copied. The second, which is optional, indicates the position of the last element that shouldn’t be  copied. Take a look at the following snippet:

var a = $("input");
var b = a.slice(1, 2);

If you debug the previous script, you’ll notice that b will reference a JQuery object which contains the second node of the wrapped set of a.  Notice that both a and b are JQuery objects.

JQuery also offers other interesting methods. For instance, there’s a find method which is similar to the filter method. This method expects a selector and  will return a new JQuery object which wraps all elements that match the passed selector. Finally, there’s also a contains method. This method returns a new JQuery object which wraps all elements of the initial set which contain the text that was passed as a parameter to the contains method.

And that’s it for this post. Keep tuned for more on JQuery.