私はhtml5データ属性を使ってレコードに関する情報を保存し、ホバーでプレビューを作成しています。私は現在以下のコードを実行していますが、時には少し不調です。それはうまくいきますが、私はまだ学んでおり、これが最良の方法ではないことを知っています。jQueryで複数のdivを更新する最も効果的な方法
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>
また、すべてのセレクタの結果を変数にキャッシュするので、必要以上に頻繁に実行されることはありません。 – GregL
@ GregL、はい、それも。 – powerbuoy
だから私ができることは、ちょうど..です。 'var preview = $("#file-preview ");それで$(プレビュー).find( '。セレクタ') ' – rennacs