Question

  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


  }

我只想在div标签中封装我的p标签以充当行，但我得到的只是<div></div><p>ssdfsdf</p><p>sdfsdfdsf</p><div></div>etc....

最好的方法是什么？

Answer 1

从片段开始，这样您就不会多次访问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


  }

Answer 2

这是一种快得多的方法！将字符串的一部分附加到数组，然后您只需更新一次DOM。

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>');时，您认为它只会添加开头div标记，但事实并非如此。 jQuery不允许你这样做是因为他们希望确保每次函数调用后html都有效。如果您只是添加开始div然后执行其他操作，文档中的下一个结束div（</div>）将关闭刚刚打开的div，完全更改文档的结构。

总结： $('#cupcake-list').append('<div>');和$('#cupcake-list').append('</div>');都会将<div></div>附加到文档中。此外，访问和更新DOM就好像它花费了你一百万美元，因为它是你在javascript中可以做的最慢的事情之一。

Answer 3

jQuery有一个名为.wrap的方法，以及一些类似的方法（.wrapAll）。

Answer 4

如果你有你显示的输出，你的代码没有到达内部，所以你有一个逻辑问题。我认为你这样做的方式是正确的。当我需要动态构建一些结构时，我通常会做同样的事情。

Answer 5

JQuery append添加了DOM节点，而不是HTML。所以你可以像这样完成你的任务：

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>')作为速记）。然后.append('<p>...</p>')在div中添加p元素。最后，$('#cupcake-list').append(...)将整个div添加到#cupcake-list的末尾。

Jquery使用append用div包装我的内容

5 个答案: