jQuery使用附录将div包装我的内容

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


  }

I just want to encapsulate my p tags within div tags to act as rows, however all I get are <div></div><p>ssdfsdf</p><p>sdfsdfdsf</p><div></div>etc....

What's the best way of doing it?

Answer 1

Start with a fragment so that you don't access the DOM more than once, and append it all at the end. You can skip the wrap by starting with your empty fragment, like so:

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

This is a much faster way to do it! Append parts of a string to an array and then you only have to update the DOM once.

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(''));

EDIT: I'll explain why yours wasn't working. When you were calling $('#cupcake-list').append('<div>'); you thought it would only add the opening div tag, but that is not the case. jQuery won't let you do this is because they want to make sure the html is valid after every function call. If you were to just add the opening div and then do some other stuff, the next closing div ( </div> ) in the document would close the div you just opened, changing the structure of the document entirely.

In summation: $('#cupcake-list').append('<div>'); and $('#cupcake-list').append('</div>'); will both append <div></div> to the document. Also, access and update the DOM as if it costs you a million dollars because it is among the slowest things you can do in javascript.

Answer 3

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

Answer 4

If you are having the output that you showed, your code is not reaching the inner for, so you have a logic problem. I think your way of doing this is correct. When i need to build some structure on the fly i usually do the same thing.

Answer 5

JQuery append adds DOM nodes, not HTML. So you can accomplish your task like this:

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>'));
  }
}

First, $('<div></div>') creates a new empty div element not yet attached to the page (you can also do $('<div>') as a shorthand if you want). Then .append('<p>...</p>') adds a p element inside the div. Finally, $('#cupcake-list').append(...) adds the whole div to the end of #cupcake-list .