Я использую jQuery для преднамеренного удаления классов CSS из элементов потенциально большой HTML-таблицы. Смотрите ниже объяснение, почему я это делаю.
Сейчас делаю так:
var tableElements = $("#TreeListElemente").find("*").addBack();
tableElements.removeClass("dxtl dxtl__B2 dxtl__B0 dxtlSelectionCell dxtlHeader dxtl__B3 dxtlControl dx-wrap dxtl__IM dxeHyperlink");
Стол иногда большой и имеет много элементов. Я хотел бы ускорить загрузку страницы / манипулирование DOM.
Встроенный в IE профилировщик Javascript говорит мне, что особенно .addBack () работает медленно. Кажется, что-то вроде сортировки, которая совершенно не нужна для моего варианта использования. Могу ли я избавиться от этого? Есть ли другой способ включить сам выбранный элемент, кроме addBack ()?
IE javascript profiler: время выполнения для коллекции около 60000 элементов. Время включения указано в третьем столбце
Или есть другой, более эффективный способ удаления классов из большого набора элементов с выбором элемента, самого себя и всех дочерних элементов?
Примечание. Почему я это делаю: я использую компонент DevXpress TreeList, который поставляется со своим собственным стилем. На стороне сервера не существует простого способа «расстегнуть его», поэтому я решил сделать это на стороне клиента, как показано выше. В конце я выбираю TreeList, все дочерние элементы и удаляю из них соответствующие классы CSS.
Обновление / Решение 1
Я успешно реализовал решение, предложенное Фредериком Хамиди, и получил значительное улучшение:
IE javascript profiler: время выполнения для коллекции около 60000 элементов, используя предложение Фредерика. Время включения указано в третьем столбце
Время, необходимое для операции addBack (), просто ушло, оставшиеся только остальные вещи. Это означает улучшение более чем в 4 раза. Ура !
Обновление / Решение 2
Я также реализовал решение, предложенное А. Вольфом, и получил небольшое дополнительное улучшение:
IE javascript profiler: время выполнения для коллекции около 60000 элементов, используя предложение А. Вольфа. Время включения указано в третьем столбце
Время, необходимое для операции find (), ушло, и снова осталось только другое. Это означает небольшое улучшение порядка 10 секунд на моей машине. Круто!
Это решение, которое я использую сейчас:
$("#TreeListElemente, #TreeListElemente [class]").removeClass("dxtl dxtl__B2 dxtl__B0 dxtlSelectionCell dxtlHeader dxtl__B3 dxtlControl dx-wrap dxtl__IM dxeHyperlink");
3 ответа
Соответствующий селектор для выбора элемента с идентификатором TreeListElemente и всех его потомков будет:
"#TreeListElemente, #TreeListElemente *"
Теперь вы можете отфильтровать потомков, имеющих класс:
"#TreeListElemente, #TreeListElemente [class]"
Так что это даст:
$("#TreeListElemente, #TreeListElemente [class]").removeClass("dxtl dxtl__B2 dxtl__B0 dxtlSelectionCell dxtlHeader dxtl__B3 dxtlControl dx-wrap dxtl__IM dxeHyperlink");
addBack () выполняет сортировку, чтобы расположить соответствующие элементы в порядке документа. Простая альтернатива, add (), делает то же самое, поэтому она не решит вашу проблему. ,
Тем не менее, документация достаточно полезна, чтобы предоставить решение:
Создать объект jQuery с элементами в четко определенном порядке и без сортировки накладных расходов используйте подпись
$(array_of_DOM_elements).
Поэтому, чтобы избежать этих накладных расходов, вы можете написать:
var ancestor = $("#TreeListElemente"),
tableElements = $(ancestor.find("*").get().concat(ancestor[0]));
get () и concat (), тем не менее, создают два массива под капотом, что влияет на производительность. Конечный результат может быть быстрее, чем ваш текущий подход, в зависимости от количества элементов, которые вы подходите.
Вот такая мысль:
function deClassify(jq, classes) {
var remove = classes.join(' ');
jq.find('.' + classes.join(',.')).removeClass(remove);
jq.removeClass(remove);
}
deClassify($('.keepme'), ['remove', 'remove2', 'remove3']);.remove, .remove2, .remove3 {
color: red;
}
.keepme, .keepme2 {
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="keepme remove remove2">
<div class="keepme2 remove remove3">x</div>
</div>Это позволяет избежать «выбора» несоответствующих элементов, снизить нагрузку и, конечно, никакой дополнительной сортировки не требуется ...
En Español