Лучший способ найти элемент внутри элемента - PullRequest
Новая
       8

Лучший способ найти элемент внутри элемента

0 голосов
/ 04 февраля 2012

Я ищу лучший способ, чем "найти", чтобы найти все элементы в элементе: 

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

Это структура, и у меня есть jquery таблицы как $ table

Я готов сделать что-то вроде этого: 

$table.find('.test');

Поиск - очень дорогой звонок. Мне нужен лучший способ сделать это. Я знаю, что могу сделать это с помощью прямых селекторов, как это: 

$('table .test');

Но я ищу альтернативу для поиска, которая работает лучше. Find работает очень плохо, особенно в IE.

Ответы [ 4 ]

3 голосов
/ 04 февраля 2012

Самое важное, что вы можете сделать, - это улучшить используемый селектор: 

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

Предоставление имени элемента значительно ускоряет выбор.Это особенно верно в версиях IE до IE9, в которых отсутствует метод getElementsByClassName.

Если у вас есть getElementsByClassName, это не даст существенного улучшения.Однако, если вы этого не сделаете, улучшение будет огромным.jQuery должен выбрать каждый элемент, которому может соответствовать, а затем проверить, присутствует ли соответствующий класс.Если вы укажете td, он будет проверять только элементы td.Если вы этого не сделаете, он должен проверить каждый элемент, что, очевидно, займет гораздо больше времени.

1 голос
/ 04 февраля 2012

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]);
        }
    }
}

Это только пример.Как я уже сказал, вы жертвуете гибкостью ради скорости, поэтому вам может понадобиться настроить ее, чтобы приспособиться к вашей конкретной структуре, но принцип остается.

0 голосов
/ 04 февраля 2012

Я думаю, что если вы используете 

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>

Будет максимально быстро.

0 голосов
/ 04 февраля 2012

Я сделал jsperf для проверки $('.test', $('#my_table')) против $('table .test');

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

Похоже, $('.test', $('#my_table')) победитель

...