Better way to find an element within a element

Question

I am looking a better method than "find" to find all the elements within an element:

<table>
  <tr>
    <td class="test">
      Test
    </td>
  </tr>
  <tr>
    <td class="test">
      Test
    </td>
  </tr>
  <tr>
    <td class="test">
      Test
    </td>
  </tr>
</table>

This is structure and and I have jquery of table as $table

I am willing to do something like this:

$table.find('.test');

Find is a very expensive call. I need a better way to do it. I know I can do it with direct selectors like this:

$('table .test');

But I am looking for an alternative for find which performs better. Find performs really bad especially in IE.

If there were a better way to do exactly what find does, jquery would use that way. — James Montagne, Feb 03 '12 at 21:56
@SergeS: I am using jquery and jquery find performance is not good. — emphaticsunshine, Feb 03 '12 at 21:58
@JamesMontagne: Never think that jquery provides you with a best solution. — emphaticsunshine, Feb 03 '12 at 22:00
IMO, the table is a drag itself. unless you are really using it to tabulate data. — Joseph, Feb 03 '12 at 22:01
There are always a lot of test case on jsperf. This one for instance: [jQuery Sizzle vs jQuery find transversal](http://jsperf.com/jquery-sizzle-vs-jquery-find-transversal/5) — Didier Ghys, Feb 03 '12 at 22:01
@emphaticsunshine Never assume that IE is going to perform well. — Kekoa, Feb 03 '12 at 22:02
@j08691: I gave you a scenario about problem and it is not exactly what happens. I have access to tableObject and there can be multiple tables in a page. That's why I asked specifically for that — emphaticsunshine, Feb 03 '12 at 22:02
@emphaticsunshine - Actually your "scenario" mentioned no such thing. Perhaps you should be more clear on your questions. — j08691, Feb 03 '12 at 22:08

score 3 · Answer 1 · answered Feb 03 '12 at 22:04

The biggest thing you can do is to improve the selector you are using:

$table.find('td.test');

Providing an element name speeds up the selection significantly. This is especially true in versions of IE before IE9, which lack the getElementsByClassName method.

If you have getElementsByClassName, this won't offer a significant improvement. If you don't, however, the improvement will be massive. jQuery has to select every element that might match, then test to see if it has the relevant class present. If you provide td, it will only test td elements. If you don't, it has to test every element, which will obviously take much longer.

score 1 · Accepted Answer · answered Feb 03 '12 at 22:12

find is slow in IE because IE does not implement a native getElementsByClassName. The fastest solution is apply knowledge of your DOM structure to the function that selects the elements. It is less flexible but always will be the fastest solution. In this case, it looks like the only elements that have the test class are td:

var rows = $table[0].rows, cells, i, j, numRows, numCells, result = [];
for(i = 0, numRows = rows.length; i<numRows; i++) { //Iterate over the table's rows
    cells = rows[i].children;
    for(j = 0, numCells = cells.length; j<numCells; j++) { //Iterate over the cells in the row
        if(cells[j].className == "test") { //Won't be valid if the cells have more than one class
            result.push(cells[j]);
        }
    }
}

This is just an example. Like I said, you sacrifice flexibility for speed, so you may need to tweak it to adapt to your particular structure but the principle remains.

But in browsers that *do* have `gEBCN` (or `querySelectorAll`) this will be much slower. It's often best to let jQuery find the quickest way, IMO. — lonesomeday, Feb 03 '12 at 22:15
I agree. Direct dom manipulation is faster in IE. jQuery selectors make it slower — emphaticsunshine, Feb 03 '12 at 22:15

score 0 · Answer 3 · answered Feb 03 '12 at 22:20

I think if you use

document.getElementById('myTable')

on

<table id="myTable">
  <tr>
    <td class="test">
      Test
    </td>
  </tr>
  <tr>
    <td class="test">
      Test
    </td>
  </tr>
  <tr>
    <td class="test">
      Test
    </td>
  </tr>
</table>

Will be fastest as possible.

score -1 · Answer 4 · answered Feb 03 '12 at 22:02

-1

I made a jsperf to test $('.test', $('#my_table')) vs $('table .test');

http://jsperf.com/find-vs-direct

It looks like $('.test', $('#my_table')) is the winner

answered Feb 03 '12 at 22:02

Mikey G

3,473
1
22
27

1

That is a pointless case, in one you are using the `id` the other you are just using `table`. `id` will always out perform `table`. And more importantly, you don't have anything with that ID, so you're getting back nothing. – James Montagne Feb 03 '12 at 22:04
This is less true (in fact, completely false) if [you do a fair comparison](http://jsperf.com/find-vs-direct/4). – lonesomeday Feb 03 '12 at 22:05
dude... there is no $("#my_table") so it will obviously perform better...try now – emphaticsunshine Feb 03 '12 at 22:06
lol thanks, i guess you're right, i fixed that now. And i don't see how it's pointless because i wouldn't call that common knowledge – Mikey G Feb 03 '12 at 22:09

Better way to find an element within a element

4 Answers4