Какой селектор jQuery для нескольких элементов лучше оптимизирован

Question

У меня есть динамически построенная таблица, построенная из данных, возвращаемых при вызове AJAX.В конце функции, которая создает таблицу, мне нужно применить оболочки JQuery UI к некоторым элементам привязки в таблице, обозначенным значками «map-marker» и «th-list».Какой из этих двух вариантов лучше оптимизировать?

$("#tblResults tbody tr td").find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

или

$("#tblResults tbody tr td a[data-icon='map-marker'], #tblResults tbody tr td a[data-icon='th-list']").button()

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

Answer 1

Для справки см. Здесь: https://stackoverflow.com/a/16423239/125981 Теперь это не является точной копией вашего вопроса, но поможет объяснить ваш вопрос в качестве дополнения.

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

Поскольку вы упомянули "множественный", давайте сначала получим ссылку на вашу таблицу, а затем кешируем ее в переменной, чтобы избежать нескольких попаданий DOM, просто чтобы сделать это.

let myResultsThing = $('#tblResults');

Теперь у нас есть элемент, на который ссылается идентификатор (самый быстрый селектор)

Почему?Давай поговорим об этом.Используемый здесь движок Sizzle использует селектор справа налево, так что это $("#tblResults tbody tr td") говорит о 1. Найти все td, 2. отфильтровать эти td для тех, кто внутри tr, 3. Отфильтровать этидля тех, кто внутри tbody 4. Отфильтруйте те, которые попадают в элемент, обозначенный идентификатором #tblResults

Теперь, если у вас есть 10 таблиц по 100 td каждая в 10 строках по три tbody каждаяВы можете видеть, что это довольно занятая работа.Поэтому, сначала изолировав идентификатор, мы бы очень быстро исключили 90% наших усилий.

ОК, у нас есть ссылка на таблицу выше.Используя это, мы можем найти tbody (или все tbody, если быть более точным, их может быть несколько), тем самым исключая любые td в верхних и нижних колонтитулах.

let myTbodies = myResultsThing.find('tbody')
//get into the rest of it
.find('tr td').find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

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

myResultsThing.find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

В зависимости от того, как именно выглядит ваш DOM, вы можете кэшировать (как я сделал таблицу) очистку до селекторов элементов TD или A, но я оставлюэто вам как упражнение, поскольку у нас нет разметки, чтобы спекулировать здесь.