Selectors in jQuery
In this tutorial i’ll go over some of the frequently used Selectors and show you how to use them. Most of jQuery’s manipulations revolve around selectors, so it’s a vital skill to know.
| One | Two | Three | Four | Five |
So.. we want to select the first td. We do this by first selecting all the td tags and then use :first to select the first td. Using jQuery’s great chaining ability, we change the text.
$("td:first").text("This is the altered first box");
jQuery also has 
dd and :even selectors. This will select the odd or even id’s. In this next example. We are selecting all of the odd td’s , and then select the first one of them. Again , we use jQuery’s chainability.
$("td:odd:first").text("We changed this using odd and first");
You need to be aware that selecting the odds/evens does not use the element ids. It just counts them. It starts from 0 and starts counting, not from 1. This is why it changes the second cell using the method above.
Now, lets match the next one by specific text. We can do this using the :contains selector. We look in all td elements, then in them we look for the word Three , if we find it we replace the text.
$("td:contains('Three')").text("we matched the text, then changed it.");
We can use the element id to edit select what we want. jQuery’s element selector is the hash symbol (#).
$("#4").text("We found this using the id");
The last one! How are we going to select it? We are going to use the gt selector. We can specify a tag, and jQuery counts how many there are. In this case we select td and it counts them (remember it starts at 0, not 1). It will select all the td that are higher than the number we specify. So we have 5 td , 0,1,2,3,4 . Se specify number 3, so only number 4 is effected. Thats our last td.
$("td:gt(3)").text("The Last One!");
Subscribe to feeds
April 23, 2008
Awesome
Is there a way to store this in a variable?
I know nothing of jquery
April 23, 2008
Yep, just use normal javascript.
var hoolahoop = $(jqueryselectorstuffhere);
April 26, 2008
[...] Using Selectors to Select HTML Elements in jQuery [...]
May 5, 2008
cool, thanks for the tutorials.
as for the comment above. you can store the actual dom node (as opposed to the jquery object) using;
var hoolahoop = $(jqueryselectorstuffhere).get(0);
May 7, 2008
[...] Using Selectors in jQuery (tags: jquery) [...]
July 16, 2008
great article and easy enough for a web designer to grasp!
July 25, 2008
This I can understand, but I would like to find out which node I am over and change a corresponding node in another list.
The only thing I can’t figure out is how to store the node I’m over. I have two lists both containing the exact same number of items. If I roll over #4 in the one list I want to do something to #4 in the other list. Works great if I plug in a number, does what I want. Unfortunately by hardcoding the number it doesn’t matter which list item I roll over, they all behave the same.
Sorry for the long explanation.
July 25, 2008
Phil, sounds interesting.
Can you give me a code sample and list exactly what you want?
July 26, 2008
I have two boxes, one on the left and one on the right. Both have the same items but display different data.
The left shows only the title of the movie. The right shows a grid of thumbnails that correspond to the title. So ‘One’ is the title and ‘OneOne’ would be an image.
One
Two
Three
OneOne
TwoTwo
ThreeThree
I want to essentially do a hover effect that shows up on both the left and right. Hovering over ‘One’ will also highlight ‘OneOne’ basically.
I have it working that if I hover over any thing in the left box that the second item in the right box does what I want. But that is because I’ve hard coded that as the selection.
$(‘div#left_box ul li’).hover(function() {
$(‘div#right_box ul li:nth-child(2)’).hide();
},function(){
$(‘div#right_box ul li:nth-child(2)’).show();
});
There are always the same number of items in both lists, never exceeding nine items.