Qualified Selectors in jQuery


Shaun Inman wrote a quick post on what he’s calling “CSS Qualified Selectors“. The syntax that he’s proposing looks something like this:

  1. a < img

Which says “Find me all a elements that have an img element inside of them.”

To those of you who are familiar with jQuery we’ve had a similar selector, :has(), for quite some time:

  1. $("a:has(img)")

If you’re totally bent on Shaun’s syntax (don’t care for :has, I would assume) here’s the two-line plugin that’ll give it to you in jQuery:

  1. jQuery.parse.push(/^\s*(<)(\s*)(.*)$/);
  2. jQuery.expr["<"] = jQuery.expr[":"].has;

Then the following will work as you would expect it to:

  1. $("a < img")

It’s really nice having an extensible selector engine at your disposal.

Posted: May 5th, 2008


If you particularly enjoy my work, I appreciate donations given with Gittip.

27 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Ukiyo-e Database and Search

Ukiyo-e.org

Japanese woodblock print database and search engine.


John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.