Question

我正在寻找一种比“find”更好的方法来查找元素中的所有元素：

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

这是结构，我将表作为$ table

表示jquery

我愿意做这样的事情：

$table.find('.test');

查找是一个非常昂贵的电话。我需要一个更好的方法来做到这一点。我知道我可以用直接选择器这样做：

$('table .test');

但我正在寻找一种更好的发现的替代品。查找执行非常糟糕，尤其是在IE中。

Answer 1

您可以做的最重要的事情是改进您正在使用的选择器：

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

提供元素名称可显着加快选择速度。在IE9之前的IE版本中尤其如此，它缺少getElementsByClassName方法。

如果您有getElementsByClassName，则不会有明显改善。但是，如果不这样做，那么改进将是巨大的。 jQuery必须选择可能匹配的每个元素，然后测试它是否存在相关的类。如果您提供td，则只会测试td元素。如果不这样做，则必须测试每个元素，这显然需要更长的时间。

Answer 2

find在IE中很慢，因为IE没有实现本机getElementsByClassName。最快的解决方案是将DOM结构的知识应用于选择元素的函数。它不太灵活，但始终是最快的解决方案。在这种情况下，看起来test类的唯一元素是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]);
        }
    }
}

这只是一个例子。就像我说的那样，你牺牲了速度的灵活性，所以你可能需要调整它以适应你的特定结构，但原则仍然存在。

Answer 3

我想如果你使用

document.getElementById('myTable')

在

<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>

尽可能快。

Answer 4

我制作了一个jsperf来测试$('.test', $('#my_table')) vs $('table .test');

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

看起来$('.test', $('#my_table'))是赢家

在元素中查找元素的更好方法

4 个答案: