Counting list items in each TD with jQuery?

[mikes02]

Within each TD of the retailers div there is a UL, what I am trying to do is determine how many list items exist in each individual TD, if there is more than 1 list item I need to style it a specific way, as you can see below, however, when trying this code it applies the CSS to every LI, I am not sure where I am going wrong?

	$('#retailers tr').each(function()
	{
		$.each(this.cells, function()
		{
			var countLI = $("ul.links").children().length;

		if(countLI + ":gt(1)")
		{
			$("ul.links li").css("background-color", "yellow");             
		}                               
	});
});

[johanafm]

mikes02;10992985 wrote:

var countLI = $("ul.links").children().length;
if(countLI + ":gt(1)")

As long as countLI isn't undefined, which it isn't, countLI + "string literal" will always yield a string, even if countLI is NaN or null, in which case the string will begin with NaN or null respectively. Moreover, the only string that evaluates to false is the empty string ('0', 'false' and 'null' are all true), and you will never get the empty string. Thus, the if condition is always true and every li gets styled.

As for what you want to achieve, do it with CSS instead

#retailers li
{
	background-color: white;
}
#retailers li:nth-child(even)
{
	background-color: red;
}

And if you want to use a more specific selector, you could of course use

#retailers tr td ul li

/* or if you don't care about old IE */
#retailers > tr > td > ul > li

[Bonesnap]

#retailers li:nth-child(even)
{
    background-color: red;
}

Keep in mind this is a CSS3 selector and isn't compatible in Internet Explorer below version 9.