jquery cache selectors best practice

Question

Какова наилучшая практика кэширования объектов jquery для приведенных ниже примеров. Есть ли лучший способ сделать это?

1)

var content='<div id="content">'+ 
      '<div id="div1"></div>'+ 
      '<div id="div2"></div>'+ 
      '<div id="div3"></div>'+ 
      '</div>'; 
$('body').append(content); 
var $div1=$('#div1'), 
    $div2=$('#div2'), 
    $div3=$('#div3'); 

2)

var div1='<div id="div1"></div>', 
    div2='<div id="div2"></div>', 
    div3='<div id="div3"></div>', 
    content='<div id="content">'+div1+div2+div3+'div>'; 
$('body').append(content); 
var $div1=$(div1), 
    $div2=$(div2), 
    $div3=$(div3); 

Answer 1

3) третий выбор :

var $div1 = $('<div id="div1"></div>'), 
    $div2 = $('<div id="div2"></div>'), 
    $div3 = $('<div id="div3"></div>'), 
    $content = $('<div id="content">').append(div1, div2, div3).appendTo("body"); 

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

$content.on('click', 'div', function(){ 
    // you clicked on some div even if the listener is on the $content 
    // 
}) 

Answer 2

Первый правильный способ сделать это.

Второй способ не будет работать в любом случае, даже если это то, что только позволит вам кэшировать элементы, которые изначально созданные в JS, нет ничего, что было изначально в DOM

Answer 3

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

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