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


  }