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.

Answer 1

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.