jQueryで複数のdivを更新する最も効果的な方法

Question

私はhtml5データ属性を使ってレコードに関する情報を保存し、ホバーでプレビューを作成しています。私は現在以下のコードを実行していますが、時には少し不調です。それはうまくいきますが、私はまだ学んでおり、これが最良の方法ではないことを知っています。

function showfileinfo() { 
    var filetags = $(this).attr('data-filetags'); 
    var tags =''; 

    if(filetags.length > 0) { 
     $.each(filetags.split(','), function(index, item) { 
      tags += '<div>' + item + '</div>'; 
     }); 
    } 

    $('.tags').html('<div class="tag-image"><img src="/_ima/tag.png"/> tags</div>' + tags); 
    $('#file-preview > h3:first').html($(this).attr('data-filetitle')); 
    $('.file-name').html($(this).attr('data-filename') + ' - ' + humanize_filesize($(this).attr('data-filesize'))); 
    $('.description').html($(this).attr('data-filetext')); 
    $('#file-preview').hide().fadeIn(); 

} 

このプレビューdivを更新しています。

<div id="file-preview" style="display:none;"> 
    <h3>Document Title</h3> 
    <p class="file-name">acrobat.pdf - 4.06 MB</p> 
    <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet arcu nec tortor porttitor laoreet sollicitudin odio vestibulum</p> 
    <div class="tags"> 
     <div class="tag-image"><img src="/_ima/tag.png"/> tags</div> 
     <div>wireframe</div> 
     <div>visio</div> 
     <div>workflow</div> 
    </div> 
</div> 

Answer 1

DOMを変更するたびに、ブラウザはページを再描画する必要があります。それは時間がかかります。 DOMを何度も変更する必要はありません（変更が必要なすべての変更について、明らかにajaxリクエストやユーザーインタラクションの変更を行う場合は、再度変更する必要がありますが、変更するたびにはDOMを変更する必要があります））。また

、単にあなたのセレクタに要素名を追加する（div.tagsだけでなく.tags）その最初の、そしてからそしてちょうどfind()要素をも物事をスピードアップするだろう、と彼らはすべての#file-preview要素に位置している場合、あなたは間違いなく選択してくださいそこ。それはまたの多くをのスピードにします。