Hi Jon,
You're almost there! What you want is to add a class to every td that
is the first child of its parent. Using td:first will select only the
very first td. You need td:first-child ! So, this line ...
$(".Grid tbody tr td:first").removeClass("GridMiddleCell");
should change to this ...
$(".Grid tbody tr td:first-
child").removeClass("GridMiddleCell").addClass("GridLeftCell");
If you only have three columns, you can add classes to each column's
cells like so:
var $cells = $(".Grid tbody tr td");
$cells.filter(":first-child").addClass("GridLeftCell");
$cells.filter(":nth-child(2)").addClass("GridMiddleCell");
$cells.filter(":nth-child(3)").addClass("GridRightCell");
Hope that helps.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Nov 24, 2007, at 9:25 AM, jonhobbs wrote:
Hi,
I've just read the Jquery book and though I understood a bit about
selectors, turned out I was wrong!
I am trying style every cell in a table but style the left and right
most colums differently.
I start with three classes....
GridLeftCell
GridMiddleCell
GridRightCell
... and I style every cell with "GridCellMiddle"
I then try to replace the class on all cells in the first column by
doing the following..
$(document).ready(function(){
$(".Grid tbody td").addClass("GridMiddleCell");
$(".Grid tbody tr td:first").removeClass("GridMiddleCell");
<-----------------
});
I thought this would drill down to each TR and select the first TD in
eact TR, but it is only affecting the first cell in the first row.
Anybody know what selector I am supposed to be using ?
Thanks, Jon
