Я использую 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 tree view

IE javascript profiler: время выполнения для коллекции около 60000 элементов. Время включения указано в третьем столбце

Или есть другой, более эффективный способ удаления классов из большого набора элементов с выбором элемента, самого себя и всех дочерних элементов?

Примечание. Почему я это делаю: я использую компонент DevXpress TreeList, который поставляется со своим собственным стилем. На стороне сервера не существует простого способа «расстегнуть его», поэтому я решил сделать это на стороне клиента, как показано выше. В конце я выбираю TreeList, все дочерние элементы и удаляю из них соответствующие классы CSS.

Обновление / Решение 1

Я успешно реализовал решение, предложенное Фредериком Хамиди, и получил значительное улучшение:

IE javascript profiler tree view

IE javascript profiler: время выполнения для коллекции около 60000 элементов, используя предложение Фредерика. Время включения указано в третьем столбце

Время, необходимое для операции addBack (), просто ушло, оставшиеся только остальные вещи. Это означает улучшение более чем в 4 раза. Ура !

Обновление / Решение 2

Я также реализовал решение, предложенное А. Вольфом, и получил небольшое дополнительное улучшение:

IE javascript profiler tree view

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");
8
Marcel 18 Дек 2015 в 17:20

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");
3
A. Wolff 18 Дек 2015 в 15:33

addBack () выполняет сортировку, чтобы расположить соответствующие элементы в порядке документа. Простая альтернатива, add (), делает то же самое, поэтому она не решит вашу проблему. ,

Тем не менее, документация достаточно полезна, чтобы предоставить решение:

Создать объект jQuery с элементами в четко определенном порядке и без сортировки накладных расходов используйте подпись $(array_of_DOM_elements).

Поэтому, чтобы избежать этих накладных расходов, вы можете написать:

var ancestor = $("#TreeListElemente"),
    tableElements = $(ancestor.find("*").get().concat(ancestor[0]));

get () и concat (), тем не менее, создают два массива под капотом, что влияет на производительность. Конечный результат может быть быстрее, чем ваш текущий подход, в зависимости от количества элементов, которые вы подходите.

4
Frédéric Hamidi 18 Дек 2015 в 14:26

Вот такая мысль:

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>

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

0
Amit 18 Дек 2015 в 14:46