Как кэшировать элемент DOM?

Question

Я понимаю, что ссылки $('#Counter') снова и снова плохая идея, потому что вы «каждый раз прыгаете в DOM».

Но это лучше?

Counter = $('#Counter'); 

И затем внутри цикла:

Counter.val()++ 

Edit:

Исправление к выше фрагмента кода, который должен быть:

Counter.val(Counter.val()+1); 

Или это делает то же самое?

Answer 1

Для описанного вами случая желательно сохранить объект jQuery в переменной перед вводом инструкции итерации, в которой вы повторно используете этот объект. Это предотвратит перемещение дерева DOM на каждой итерации. Кроме того, он может быть нечувствителен к поиску по идентификатору, но запрос по имени класса или с использованием составных селекторов может значительно снизить производительность.

var $Counter = $("#Counter"); 
for (...) { 
    $Counter.val(function(i, val) { return +val + 1; }); 
    ... 
} 

Обратите внимание на использование функции в качестве аргумента val() который является более разумным в данном случае.