jQuery Custom Selectors - Holy Cow That Is So Badass!
Posted February 23, 2007 at 4:49 PM by Ben Nadel
One of the things that is so cool about jQuery is the user of selectors to match DOM elements. Glen Lipka just pointed out to me that you can create your own custom selectors. Holy cow! That is so bad ass, you have no idea. Since I am very new to all of this, I figure I would write a little experiment to see how it worked (NOTE: I am new, so take this with a grain of salt).
I am going to create a list of links that have a REL attribute and a HOTNESS attribute. Then I am going to create my own selector "hottie" which selects only links where the REL attribute is "girl" and the HOTNESS attribute is greater than or equal to 9.
- <html>
- <head>
- <title>jQuery Custom Selector Test</title>
- <script type="text/javascript" src="jquery-latest.pack.js"></script>
- <script type="text/javascript">
-
- // Extend the jQuery object to include the
- // custom selector "hottie" for the ":" expression.
- jQuery.extend(
- jQuery.expr[ ":" ],
- {
- hottie : (
- "jQuery( a ).attr( 'rel' ) == 'girl' && " +
- "jQuery( a ).attr( 'hotness' ) >= 9"
- )
- }
- );
-
-
- // This will highlight the girls who are hotties.
- function FindHotties(){
-
- $( "ol a:hottie" ).css( "font-weight", "bold" );
-
- }
-
- </script>
- </head>
- <body>
-
- <ol>
- <li><a rel="girl" hotness="9.0">Sarah</a></li>
- <li><a rel="girl" hotness="8.0">Libby</a></li>
- <li><a rel="girl" hotness="9.0">Azure</a></li>
- <li><a rel="girl" hotness="8.5">Cindy</a></li>
- </ol>
-
- <p>
- <a href="javascript:void(0);"
- onclick="FindHotties();"
- >Find Hotties</a>
- </p>
-
- </body>
- </html>
Running this page, the initial output is:
- Sarah
- Libby
- Azure
- Cindy
But, once I click on the "Find Hotties" link, the output gets changed to:
- Sarah
- Libby
- Azure
- Cindy
HOW FREAKIN' COOL IS THAT?!?!? jQuery is becoming more and more exciting by the day. I can imagine using stuff like this all over the place. My gut feeling says that this sort of thing is not the most "performant", but JavaScript is so fast on new computers, what can it matter. Plus, it's almost too easy to use, I can't pass it up.
Here is a huge list of custom selectors that Glen gave me. Are you beginning to see the possibilities?
Reader Comments
Sweet man! You're really digging jQuery from what I see! :)
Hey Ben, cool for showing how easy it is to make a custom selector, but shouldn't you use a namespace to add custom/arbitrary attributes to existing tags? Otherwise your code wont validate as xhtml.
And how do you declare namespaces Jordan?
@Rey,
This stuff is just too cool! How could you not like it. Do realize how easy this sort of thing will make readable selection code? Too easy.
@Jordan,
Good point, I am not one who often adds custom attributes so it didn't occur to me. This jQuery stuff is new, so I am only beginning to see the possibilities.
@Will,
While I cannot answer with 100% accuracy, you would create a namespace by declaring it in the HTML tag. I don't know the exact syntax, but I think, if I wanted to make a "Kinky" name space for Kinky Solutions, I would use this HTML tag:
<html xmlns:kinky="www.kinkysolutions.com">
Then, in the code, since "hottie" is a custom attribute, I should define it as such:
[a kinky:hottie="9.5"]...[/a]
This will prevent attribute clashes if XHTML 2.0 decides to add the "hottie" attribute to the link tag.
Of course, I have never done this, so I may be off, but I think that is the gist of it.
You could also use the REL tag as a XHTML compatible attribute. But as a general rule, I have trouble understanding why XHTML is so limited on this score. Wy can't we just add attributes? What is the downside? Will a browser not work with it?
I just don't see why it matters for 99.9999% of all projects.
Glen
--Otherwise your code wont validate as xhtml.
But who cares what a validator somewhere thinks? It affects nothing.
Stylo,
While I would agree with you in theory, in practice, a surprising number of clients will require that their site validates as XHTML. But other than client needs, agreed, it affects nothing.
This is cool, Thanks.
Awesome example but
your choice of example data is mildly annoying.
@C.R,
I am not I know what you mean? Can you explain further?
Pretty nice indeed.
Hi. Hust a quick comment. I copied the code, linked to JQuery.js etc, get qa function expected on the expr line (16). TRied sorting it but can't. Pity it doesnt work. AS for C.R I think he is saying that your choice of sexist naming is facile. Regards
A nice explanation, but pretty ... questionable choice of subjects. Rating girls by hotness might not be the most inclusive way of explaining this topic and will offend quite a few people. How about rating books by stars or hardware by manufacturer?
If you ever wonder why there aren't more women in software, you need to look no further than posts like this.
@Steve Hoefer
If you read other blog posts at BenNadel.com, you will understand.
This is the hotness and cuteness mojo of BenNadel.com. This is all about fun and no harm done while delivering quality content.
So far you are the first one that thinks of it in a negative way.
Think positive, look at the header images, not a single one in which Ben does not smile.
Concentrate on the content which is top quality.
Cheers!
I've started using my "friends" in examples rather than girls.
@Ben, I don't think there's anything wrong with you using hot girls for your examples, or for rating girls as hot. As for there not being women in software, I doubt very seriously a post would have any effect on that whatsoever, or that it has anything to do with the lack of women in the field. The type of girl who is going to be interested in software development isn't likely to be "so offended" by someone's choice of data that they are going to be scared out of the field like that. We female developers do have slightly tougher skin than that. :-P I think, if anything, that if there is a shortage of girls in the field, it simply has to do with the fact that most women are very right-brained, leading them into career fields like graphic design, web design, and more art-centered fields, whereas men tend to be more left-brained, leading them into fields such as mathematics or software development. I do admire your attempt at not offending anybody, and am glad you are trying to keep the peace, but please don't let anyone make you think that you or your posts are to blame for a shortage of women in the field. The very few women who may be offended by ONE post like this ENOUGH to leave the field must not be very interested in the field at all to begin with. And this particular post isn't even all that offensive...it's not like it is outright porn or that you are describing area's of a woman's body in a lewd manner...it's just a fun post! And SOME WOMEN LIKE TO FEEL HOT. Some women don't mind a man actually calling them hot. What woman has a problem with that???
I hate how men in the computer field seem to hate hot girls. What is wrong with hot girls? Why are men in the computer field hating on hot girls? What is wrong with men in this field?
I see this topic is already years old, but I think I should at least give a small correction:
Using own custom attributes will work fine with jquery and therefore will not harm the final result.
However, for those who want their code to be xhtml valid, they should use 'data-' in front of their custom attributes.
So instead of hotness="9.0" you would get data-hotness="9.0"
It is nearly the same, but data- is added in front of it, which is (officialy) supported in html5. I'd prefer 100% custom attributes, but unfortunately those are not valid.
