• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Junilu Lacar
  • Liutauras Vilda
  • Paul Clapham
  • Jeanne Boyarsky
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Piet Souris
  • Carey Brown
  • Jesse Duncan
  • Frits Walraven
  • Mikalai Zaikin

Writing custom JQuery Selectors

Ranch Hand
Posts: 15304
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 ]
Posts: 67645
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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).
pie. tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
    Bookmark Topic Watch Topic
  • New Topic