File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Writing custom JQuery Selectors Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Writing custom JQuery Selectors" Watch "Writing custom JQuery Selectors" New topic

Writing custom JQuery Selectors

Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15302

JQuery in Action does't really cover this but I thought in the spirit of Bear's posts here and here and since I really enjoy using JQuery I'd show how this might be done.

Sometimes selectors in JQuery can get a bit complex depending on what type of DOM traversal you are needing to do. And for those not familiar with CSS it can be even more complex. However, to get my point across I am going to show a fairly simple example. In a project I am working on I have a javascript heavy wizard type page that uses a vertical accordion to navigate through different "parts". I am keeping track of a few "state" properties along the way using an object like so:

In order to retrieve a specific element on the page that represents the UI of the current step I needed to do something like this:

While this isn't bad its a bit too much to type every time I need to get this specific element. I could also have placed it in a function and just called that function but for the sake of being a bit more jquery like I decided to turn it into an selector. To create custom selectors in JQuery you begin by extending JQuery's built in expression function like so:

So how do you define an selector to use? Really simple. The code I posted above to get the element? That is the selector expression. Only one thing needs to be changed. A selector looks something like this:

JQuery's expression extension mechanism has a few built in variables for use. One being the variable a. a represents the element. So I want to create a selector that looks like this:

This is what it looks like:

And that's it. Now when I do jQuery("div:step") I get back the element requested by the expression. And I can do thins like:

To define more selectors you just seperate them with a comma. I needed 2 more. "div:nextStep" and "div revStep". so now my code looks like this:

Arguably I could have create a custom JQuery function to do the same thing but this was a fun exercise.

JQuery has some useful and powerful built in selectors. You can see them listed here.
[ January 15, 2008: Message edited by: Gregg Bolinger ]

GenRocket - Experts at Building Test Data
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63844

Thanks for posting that Gregg!

While this is a very advanced example of extending jQuery, one of jQuery's strengths is that it is so easily extended. Adding new utility functions and adding new wrapper methods is trivially easy.

And, as Gregg has demonstrated, even adding new selectors is possible (if a little more advanced than adding function and methods).

[Asking smart questions] [About Bear] [Books by Bear]
I agree. Here's the link:
subject: Writing custom JQuery Selectors
It's not a secret anymore!