0 
  for(var i=0; i<num_cols; i++)
  {

    //Wrapper for column
    $('#cupcake-list').append('<div>');
    //end wrapper

    col_count++;
    num_in_col = rowsInCol(total,num_perCol,col_count);
    start = i*num_perCol;
    end = start + num_in_col;
    for(var d=start; d<end; d++)
    {
      $('#cupcake-list').append('<p>'+cupcakeData[d].name+'</p>');
    }


      //Wrapper for column
    $('#cupcake-list').append('</div>');
    //end wrapper


  }

pタグをdivタグ内にカプセル化して行として機能させたいだけですが、取得できるのは<div></div><p>ssdfsdf</p><p>sdfsdfdsf</p><div></div>etc....

それを行うための最良の方法は何ですか？

4

5 に答える 5

2

DOMに複数回アクセスしないようにフラグメントから始めて、最後にすべてを追加します。次のように、空のフラグメントから開始することで、ラップをスキップできます。

var $fragment;
for(var i=0; i<num_cols; i++)
  {
    $fragment = $('<div />');
    col_count++;
    num_in_col = rowsInCol(total,num_perCol,col_count);
    start = i*num_perCol;
    end = start + num_in_col;
    for(var d=start; d<end; d++)
    {
      $fragment.append('<p>'+cupcakeData[d].name+'</p>');
    }


      //Wrapper for column
    $('#cupcake-list').append($fragment);
    //end wrapper


  }
于 2012-05-15T17:38:05.797 に答える
2

これはそれを行うためのはるかに速い方法です！文字列の一部を配列に追加すると、DOMを1回更新するだけで済みます。

var a = [];
for(var i=0; i<num_cols; i++)
{
    a.push('<div>');
    col_count++;
    num_in_col = rowsInCol(total,num_perCol,col_count);
    start = i*num_perCol;
    end = start + num_in_col;
    for(var d=start; d<end; d++)
    {
        a.push('<p>'+cupcakeData[d].name+'</p>');
    }

    a.push('</div>');
}
$('#cupcake-list').append(a.join(''));

編集：あなたが機能しなかった理由を説明します。あなたが電話をしているとき、あなたはそれがオープニングタグを$('#cupcake-list').append('<div>');追加するだけだと思っていましたが、そうではありません。divjQueryは、すべての関数呼び出しの後にhtmlが有効であることを確認したいので、これを実行できません。開始divを追加してから他の処理を行う場合、ドキュメント内の次の終了div（</div>）は、開いたばかりのdivを閉じ、ドキュメントの構造を完全に変更します。

要約 する$('#cupcake-list').append('<div>');と$('#cupcake-list').append('</div>');、両方ともドキュメントに追加<div></div>されます。また、DOMは、JavaScriptで実行できる最も遅い処理のひとつであるため、100万ドルかかるかのようにアクセスして更新します。

于 2012-05-15T17:38:53.097 に答える
0

jQueryには、と呼ばれるメソッド.wrapといくつかの同様のメソッドがあります（.wrapAll）。

于 2012-05-15T17:36:05.123 に答える
0

表示した出力がある場合、コードはの内部に到達していないため、ロジックに問題があります。これを行うあなたのやり方は正しいと思います。その場でいくつかの構造を構築する必要があるとき、私は通常同じことをします。

于 2012-05-15T17:38:22.603 に答える
0

JQueryの追加により、HTMLではなくDOMノードが追加されます。したがって、次のようにタスクを実行できます。

for(var i=0; i<num_cols; i++)
{
  col_count++;
  num_in_col = rowsInCol(total,num_perCol,col_count);
  start = i*num_perCol;
  end = start + num_in_col;
  for(var d=start; d<end; d++)
  {
    $('#cupcake-list').append($('<div></div>').append('<p>'+cupcakeData[d].name+'</p>'));
  }
}

まず、ページにまだ添付されていない$('<div></div>')新しい空の要素を作成します（必要に応じて省略形として作成することもできます）。次に、div内に要素を追加します。最後に、全体をの末尾に追加します。div$('<div>').append('<p>...</p>')p$('#cupcake-list').append(...)div#cupcake-list

于 2012-05-15T17:38:54.410 に答える