• 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 ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • paul wheaton
  • Jeanne Boyarsky
  • Ron McLeod
Sheriffs:
  • Paul Clapham
  • Liutauras Vilda
  • Devaka Cooray
Saloon Keepers:
  • Tim Holloway
  • Roland Mueller
Bartenders:

Writing custom JQuery Selectors

 
Ranch Hand
Posts: 15304
6
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 ]
 
Sheriff
Posts: 67753
173
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).
 
Don't mess with me you fool! I'm cooking with gas! Here, read this tiny ad:
Smokeless wood heat with a rocket mass heater
https://woodheat.net
reply
    Bookmark Topic Watch Topic
  • New Topic