Today I was trying to figure out a way to apply some functionality to a given set of anchor tags on a web page. Basically, I wanted to be able to add a function to all of the anchor tags on a page that link to an image file. The first thing that came to mind for how to handle this, was jQuery. It was made for this sort of thing. I knew I could do it with jQuery, it just took me a little bit to figure out the right syntax for doing it. So, I had to figure out a way to write a jQuery selector that said “give me all of the anchor tags on the page where the href attribute contains an image file extension”. So I did a little bit of searching, and stumbled across this article on how to use predicate selectors in jQuery. The syntax I ended up with was:
1: $(“a[@href *= '.jpg']“)
BRILLIANT! (yes, I know, I still need to figure out how to OR the other image type extensions (.gif, .png, etc) together into the “contains” predicate, but that’s the easy part really). I couldn’t put it any more clearly than, or agree with this statement any more (pardon the language):
The more I read up on jQuery, the more I realize how sweet-a** it is. jQuery is the “Easy” button of the user interface world.
That says it all for me right there. Before I was introduced to jQuery, I hated doing JavaScript of any kind in my web apps. Now, having jQuery, I go out of my way to look for ways to use it…its THAT cool.
s/b something like (’*.jpg’|'*.gif’) javascript or’s are very c-like, so it may be ||
I’ve looked at asp.net ajax, ext, scriptaculous, yui, and mootools. I really like mootools. It is fast and just seems to do what the others do smoother. For some reason though I turn to these tools as options when I need shown how to do something, or need something prebuilt. Sometimes you can’t find what you need and you just have to do it yourself, or you want to do it your way. jQuery rocks this way. I just get things done with jQuery. I can’t say enough about it. It works the way I work.
“It works the way I work”
I like that…nicely put. I totally agree.
Hey Bob. Use a comma to OR predicates. jquery uses CSS conventions a lot in its selectors.
$(”img[@src*='jpg'],img[@src*='gif']“)
-bill
@Bill - That’s ultimately what I ended up doing. I had thought that ORing the strings that I was looking for in the HREF attribute of the URLs would’ve been easier, but doing it the way you suggested ended up being the only thing I could get working. But that was easy enough though…its not like I was looking for a hundred different kinds of file types. I was pretty much just looking to narrow it down to JPG, GIF and PNG.
Wait… it isn’t pure selectors, but try this:
$(”a img”).parent().each( function(){
// …
});
The function that I ultimately ended up with looked like this:
$(“a[@href *= ‘.jpg’], a[@href *= ‘.gif’], a[@href *= ‘.png’]”).lightBox();
And that gave me exactly what I needed. Because I wanted to add the lightBox() function to anchors that point to images (as opposed to, say, anchors that might point to an actual URL instead, as Bill’s function would capture).