• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Writing custom JQuery Selectors

 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64717
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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).
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic