Question

I’m trying to stripe table cells in rows with JavaScript based on their row’s position in a table and value, so I thought to use tr:nth-child(i) td to grab only the cells (ignoring th)…

Here’s a fiddle to show the problem (bug?) I’ve found: http://jsfiddle.net/redroot/pBe94/. As you can probably see i’m striping the td elements in the first four rows in the body of the table. In Chrome and Safari, only the first cell is found in the 2nd and 3rd rows, whereas if I find the row first, then use find("td") it works fine, as shown in the 4th row.

At first I thought it was my markup, but it seems fine, and it works fine in Firefox. So I’m a little stumped, any help would be appreciated!

(Sme thing happens with document.querySelectorAll in my tests, only in Chrome and Safari.)

Answer 1

Yes, there seems to be some WebKit bug indeed. I also experienced this previously here, but the bug has not yet been fixed apparently.

One thing to do is forcing Sizzle to do the selection instead of the native WebKit engine:

$.expr[":"].dummy = function() {
    return true;
};

Then you can use:

$("#rows tbody tr:nth-child(1) td:dummy").css("background-color","#e0e0e0");

Since :dummy is not available natively, jQuery will use Sizzle (its custom selection library). Going this non-native way is a performance penalty though (as always).

http://jsfiddle.net/pBe94/2/