Faster jquery selector for finding a number of TD elements

Question

I have a table where each row has 13 TD elements. I want to show and hide the first 10 of them when I toggle a link. These 10 TD elements all have an IDs with the prefix "foo" and a two digit number for its position (e.g., "foo01"). What's the fastest way to select them across the entire table?

$("td:nth-child(-n+10)")

or

$("td[id^=foo]")

or is it worth concatenating all of the ids?

$("#foo01, #foo02, #foo03, #foo04, #foo05, #foo06, #foo07, #foo08, #foo09, #foo10")

Is there another approach I should be considering as well?

Answer 1

Use this

 $("td:lt(10)")

I say this because you have ids which should be unique, meaning one row.

You could also use $("tr").find("td:lt(10)") for multiple rows...but keep those IDs unique.

But keep something in mind here, the speed of the selector is going to have minimal impact here. Redrawing a table means a lot of reflow calculations by the browser (this column is how wide based on all text, what wraps, etc). That's what's going to eat your time in this operation, the selector won't have a huge performance impact since the vast majority of processing time for this will be spent after it runs.

Answer 2

What if you added all of them to one class? Or you could use "rel" maybe...just thinking that having one common identifier might speed things up.