Add gradient background color to list view rows with jQuery

Question

In SharePoint 2007 using Content Types and editting NewForm.aspx with jQuery I've managed to customize the look of a new item, adding a gradient color identity for each Content Type. I want to continue that look in the views, too. For the "All Items" view, I added a Content Editor Web Part into which I coded styles and jQuery script. I'd like to be able to display gradient colors in the view and I've got that accomplished in FireFox but IE8 seems resistent.

In the Content Editor Web Part I have code that works in ForeFox but not in IE8. The issue seems to be that IE8 doesn't handle jQuery statement: $Text.parent();.

Question: Does anyone know of a way to add a class to a parent without using obj.Parent()? Or is there an IE workaround for this issue?

BTW, this jQuery statement does work in IE8: $Text.parent().css("background-color", "#FF0000");, however, the it is without the gradient qualities.

Thanks in advance,

-Arnold

Code:

<style type="text/css">
.formRedBackground
{
    background: white;
    background: -moz-linear-gradient(top, white, #FF0000);
    background: -webkit-gradient(linear, left top, left bottom, from(white), to  (#FF0000));
    filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='white', EndColorStr='#FF0000', gradientType='0');
    color:#FFFFFF;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$Text = $("td .ms-vb2:contains('Red')");
var myelement = $Text.parent();
myelement.addClass('formRedBackground');

});

Answer 1

I found the answer to my question. I modified the jQuery to execute a function on the parent of the TD. I also ended up changing my requirement so that just the first two TD elements in a TR are colorized.

Here is the code in case it helps someone else:

<script type="text/javascript">
$(document).ready(function(){

$Text = $("td .ms-vb2:contains('Beige')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formBeigeBackground");});

$Text = $("td .ms-vb2:contains('Black')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formBlackBackground");});

$Text = $("td .ms-vb2:contains('Lavender')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formLavenderBackground");});

$Text = $("td .ms-vb2:contains('Pink')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formPinkBackground");});

$Text = $("td .ms-vb2:contains('Red')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formRedBackground");});

});
</script>

This is a great site,

-Arnold