jQuery Snippet – Interesting Selectors – Blancer.com Tutorials and projects

As usual, here at Switch On The Code we are diving into jQuery once again. However, unlike a typical foray in the Javascript world, we are going to look at some simple jQuery selectors. Not just any selectors though. Today I have some interesting selectors that you may not know about, but can be extremely useful. So let’s get started.

:even and :odd

Quite possibly the most practical of the non-standard selectors, these do exactly what you are thinking. Being able to select every even or every odd object in an array can be very useful when you need to make your tables spiffy.

//Give my even rows some color
$(‘#myTable td:even’).css("background-color", "#ff5544");

:header

Before you go crazy trying to figure why you would need to select all header elements (h1, h2, h3), think about it a bit more. You could want to restructure the page, or scrap it for titles or important notes. You could also want to apply something to all the headers, who knows what crazy jQuery things you might need to do. This selector just saves you a few extra lines.

//Why not?
$(‘body’).find(‘:header’).remove();

:lt() and :gt()

Two letters can mean a lot of things, but in this case we have the Less-than and Greater-than selectors. This allows you to directly effect the result set that is returned, but specifying what indexes you want. Lesser-than (:lt) will return anything in the result set that appears before the specified index. As you may have guessed, greater than returns any object that appears after. Personally I am not sure why you would use this, but it is an interesting concept, none-the-less.

//Lets shorten things up a bit
$(‘div span:gt(4)’).remove();

:hidden

This one I personally find extremely useful. This selects elements that are not currently displayed, but not just with inputs of type hidden. This also selects anything of display none, objects with a width and height of 0, or any element with a hidden parent. So if you ever wanted to find out what might be hidden on a page, this selector is how you do it.

//Lets reveal a few things
$(‘body’).find(‘:hidden’).show();

:contains()

This is by far the most powerful selector that jQuery has to offer. It’s pretty obvious what this selector does, and I know I love the prospect of using a selector to determine what elements have the information I am looking for. This selector really shows that jQuery goes beyond normal CSS selectors and gives us ways to get exactly what we need, no matter how we want to find it.

//This is how you find him
$(‘body’).find(":contains(‘waldo’)");

:animated

We both know you use jQuery animations, and this seletor will help you halt all those animations if you need to. If you use one animation, chances are you use multiple ones, and sometimes you just need to hit the panic button and stop everything. So don’t underestimate such a specialized selector.

$(‘body:animated’).stop();

So these are some of the more interesting selectors I have come across. Some are more specialized than others, but they all have their uses. One thing to keep in mind though is that most of these have a sister function. For example, there are selectors for :first and :last, but there are also functions that do the same thing, .first() and .last(). That being said, personally I think selectors offer a more efficient way of doing things.

This wraps it up for this tutorial, I hope you have a place for your new selectors. Just remember, when you need coding help all you have to do is Switch On The Code.