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.
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 ]