JQuery кэширующие селекторы

Question

У меня есть div с идентификатором #wrapper, и все элементы находятся внутри него. Я кеширую оболочку, выполняя

var $wrapper = $('#wrapper');

Теперь в любое время, когда я хочу сделать селектор или ссылаться на элемент, я делаю

$wrapper.find('#whatever').click(....

Делая это, я избегаю повторного переноса объекта jQuery, поэтому любой селектор, который я сделаю в будущем, будет основан на кэшированном $wrapper. Но с другой стороны, когда я использую find() с кэшированным $ wrapper, я знаю, что он будет искать все элементы внутри #wrapper. У меня такие вопросы, которые лучше, используйте кэшированную переменную вместе с командой find, затем выдайте событие click, или просто выполните $('#whatever').click(..

whatever может быть классом или идентификатором.

Answer 1

А как насчет $ ('селектор', контекст), так что ...

$('#whatever', $wrapper)

ищет DOM только в контексте $ wrapper

Не ищите по всему дереву, когда вы можете искать по одной ветке или ветке.

Answer 2

Два не полностью эквивалентны. Ваша версия для кэширования фактически совпадает с $("#wrapper #whatever") и не будет соответствовать элементу с идентификатором whatever, если он не содержится в div-обертке.

Если вы всегда намереваетесь, чтобы элемент #whatever находился в пределах #wrapper, то $('#whatever') на самом деле, вероятно, быстрее, чем ваша кэшированная версия - поиск элементов по идентификатору включает один вызов функции getElementById, доступно во всех браузерах, в то время как ваша кэшированная версия включает проверку иерархии, чтобы убедиться, что соответствующий элемент #whatever спускается с #wrapper.

Answer 3

, если вы используете его, где whateverID - это ID, тогда $('#whateverID').click(.. даст вам немного лучшую производительность, однако, если whateverCLASS - это класс или что-то отличное от ID, $wrapper.find('whateverCLASS').click(.... будет лучше, так как Обход будет ограничен конкретным контейнером, который является подмножеством всего DOM

Answer 4

По производительности лучше кэшировать «обернутую» версию элемента DOM.В противном случае вы будете обходить DOM каждый раз, когда делаете $("#myElem"), что может быть очень дорого, если ваш DOM действительно большой или вы делаете это много раз.