Применение класса к элементу - JQuery

Question

Я работаю на веб-странице с большим количеством таблиц. Сценарий JQuery обрабатывает каждую строку и решает, какой стиль CSS должен быть применен к ней. Я использую этот фрагмент для применения класса к ячейке таблицы

$myElem.parents('td').eq(0).attr('class', 'requiredClass'); 

Функционально, он работает как ожидалось. Однако в IE7.0 для этого требуется 16 мс. Учитывая количество строк на странице, это добавляется довольно быстро, по крайней мере, через полсекунды.

Как это сделать быстрее?

Answer 1

В свете Вашего комментария в вопросе, то это должно быть самым производительным

$Elem.parent('td').addClass('requiredClass'); 

Это использует parent() вместо из parents(), бывший только смотрит на на родительский, последний смотрит на всех родителей, но исключает корневой узел.

<td>, скорее всего, также является избыточным в parent(), поскольку он действует, чтобы отфильтровать те родительские узлы, которые не являются элементом <td>. Поскольку вы обрабатываете каждую строку за раз, я бы предположил, что вы можете гарантировать, что родитель в каждом случае равен <td>, и поэтому я тоже удалю этот фильтр. Таким образом, становится

$Elem.parent().addClass('requiredClass'); 

Это может быть еще быстрее, если вместо обработки каждой строки в то время, вы можете определить набор строк, которые должны иметь определенный класс применяется к <td> в вопросе, а затем выдать один селектор для добавления класса. Это может быть невозможно, это зависит от проверки, но, тем не менее, это просто мысль.

EDIT:

Вы говорите, что вам нужно удалить неизвестный класс перед добавлением нового, но не знаете, что имя класса будет в каждом конкретном случае. Вызов метода removeClass() без параметра string name будет удалять все классы. Если вы не знали, Elements может иметь несколько классов, каждый из которых разделен пробелом, например <td class="class1 class">.Команда addClass() jQuery гарантирует, что каждое добавленное новое имя класса будет отделено от любого другого пробелом. Таким образом, селектор может выглядеть как

$Elem.parent().removeClass().addClass('requiredClass'); 

Answer 2

Попробуйте использовать метод addClass.

$("#ID").addClass("newclass"); 

И используйте removeClass, если вы хотите его удалить.

Проблема может заключаться в том, что обработка класса как атрибута может быть не быстрой в IE (это моя догадка, поскольку я не использую IE).

Answer 3

попробовать

$myElem.parents('td').eq(0).addClass('requiredClass'); 

Answer 4

Использование addClass() method, он добавляет указанный класс (ы) к каждому из набора совпавших элементов.

$Elem.parent('td').addClass('requiredClass'); 

Answer 5

Я думаю, что ваша проблема связана с вызовом функции eq. Кажется, вам нужен только первый td, поэтому ниже это гораздо более подходящий селектор. Я также использую функцию addClass установить имя класса, в отличие от использования attr

$myElem.parent('td:first').removeClass().addClass('requiredClass');