0

一度に要素をDOMに追加するにはどうすればよいですか？以下のコードからわかるように、ループ内のルート要素（tr_next）にデータを追加しています。

$('.abc').each(function(){
  //create element code here
  var tr_next = $("<tr>");
  var td_contact_fname = $("<td>").attr({"width" : "190px" , "align" : "center"});

  td_contact_fname.appendTo(tr_next);
  td_contact_lname.appendTo(tr_next);
  td_month.appendTo(tr_next);
  td_day.appendTo(tr_next);
  td_email.appendTo(tr_next);
});

私はvimeoでこのビデオを見ました：ブラウザが内部でどのように機能するか、そしてブラウザがパフォーマンスに影響を与える多くの再描画（またはそのようなもの）を実行する必要があるため、domに何かを追加するときは一度にそれを行うべきだと彼らは言いました。

4

4 に答える 4

5

この.append関数は、複数のjQueryオブジェクトを引数として受け入れることができます。

tr_next.append(td_contact_fname,td_contact_lname,td_month,td_day,td_email);

これが実際に1回の操作ですべての追加を実行するかどうかはわかりませんが、複数の追加を最適化する方法がある場合は、jQueryチームがそれを実装していると思います。

少なくとも、コードはクリーンアップされます。

于 2012-08-15T01:42:32.893 に答える
1 
var tr_next = $("<tr>");
var td_contact_fname = $("<td>").attr({"width" : "190px" , "align" : "center"});
var groupby = td_contact_fname.add(td_contact_lname,td_month,td_day,td_email);

$('.abc').each(function(){
    tr_next.append(groupby.clone())
});

編集：要素のクローンを作成することを忘れないでください。

于 2012-08-15T01:54:36.617 に答える
1

要素をDOMにアタッチせずに作成できます。

var $_container = $('<div id="someContainerId" />');

これで、実際のコンテナーに新しいものを追加してからコンテナーを追加するたびにリフローを発生させることなく、ループまたはコンマの処理を実行できます。これにより、大量のリフローではなく1回のリフローがトリガーされます。

jQuery以外のアプローチについては、documentFragmentを検索することをお勧めします。

于 2012-08-15T02:07:37.220 に答える
1

jQuery Fundamentalsには、これに関するいくつかの便利なガイドラインがあります。

サンプルのようなループと、「append（item1、item2）」で発生するループが最も遅くなります。

ドキュメントフラグメントを作成し、それにすべてを追加し、ループが完了した後、フラグメントを本文に追加することをお勧めします。

   var frag = document.createDocumentFragment();
   $('abc').each(function() {
      frag.appendChild(/*Stuff you want to append */);
   }
   $("<tr>").appendChild(frag);

または、ループを使用してhtmlの文字列を作成し、そのように追加します

 $('<tr>').html(myHtmlString)
于 2012-08-15T02:12:39.547 に答える