javascript - jqueryの追加と追加

Question

これらの 2 つのアプローチの間に (特にパフォーマンスの点で) 違いがあるかどうかを知りたいだけです。

1)

$('.container').append('<div class="divChild">test div</div>'); 
$('.container .divChild').click(function() { alert('test'); });

2)

var $childDiv = $('<div class="divChild">test div</div>');
$childDiv.appendTo($('.container')).click(function() { alert('test'); });

基本的に、divChild div を 2 回検索する必要がないため、2 番目のアプローチの方がはるかに高速に見えますが、クリックイベントを div に追加する必要があります。そうですか？

score 2 · Accepted Answer

ここで最初に指摘することは、これを頻繁に（非常に短い期間に数千回）行わない限り、問題になる可能性は低いということです。

しかし、私が行う最も効率的なことは、結果を覚えて、$('.container')それを使用childrenすることだと思います。

var c = $('.container');
c.append('<div class="divChild">test div</div>'); 
c.children('.divChild').click(function() { alert('test'); });

または、実際には、技術的には、変数は必要ありません。

$('.container')
    .append('<div class="divChild">test div</div>')
    .children('.divChild')
      .click(function() { alert('test'); });

しかし、そのような長いチェーンは、読みにくく、維持しにくく、デバッグしにくいと感じています。

score 2 · Accepted Answer

別のオプションは次のとおりです。

$('<div/>', {
    'class': 'divChild',
    'text': 'test div',
    'click': function(){
       alert('test');
    }
}).appendTo('.container');

2 に答える 2