Using jQuery to Grab CSS Child Elements

Posted by Stephen Weyrick | Tags: jquery

In my second jQuery post, I am going to attempt to style a table by grabbing the child elements under a CSS class.  Here is my normal html table with a CSS class '.something' applied to it. The table has header tags as well as a caption.

nothing
1 2 3
1 2 3
1 2 3

.something{
    border-collapse: collapse;
}

The first thing I do is call the $(document).ready() function in my previous example.  Then I add the following code inside the function which should turn the background color of my child selector <thead> red:

$('.something > thead').addClass('red');

nothing
1 2 3
1 2 3
1 2 3

You can add multiple child selectors by adding a comma after tag. For example, 'thead, hr, caption' would turn the background of everything red. For some reason when I tried to add the background color only to the tr tag, nothing happened. I am not sure if this is a jQuery bug, or its looking for the tbody tag. If I figure it out, I will post a solution.

March 22, 2009

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment