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 一次。

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 中可以做的最慢的事情之一。

于 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 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>')如果需要，您也可以作为简写）。然后在 div 中.append('<p>...</p>')添加一个元素。p最后，$('#cupcake-list').append(...)将整体添加div到#cupcake-list.

于 2012-05-15T17:38:54.410 回答