用jQuery拆分一行[Bootstrap | JSON]

在您当前的代码中，您将<div class='row'>添加到每一方，您可以通过仔细计算当前id来解决它，并且:

1. 当当前索引位于行首时，执行partyHTML += '<div class = "row">';
2. 当行项已满或循环以非空行结束时，执行partyHTML += '</div>';关闭它。

var count = 0;
var item_per_row = 3;
$.each(partyURLResponse.data, function(partyIdx, party) {
   /*optional stuff to do after success */
   if (count === 0) { // Start of a row
    partyHTML += '<div class = "row">';
   }
   partyHTML += '<div class = "col-md-4">';
   partyHTML += '<p>' + party.id + '</p>';
   partyHTML += '</div>';
   ++count;
   if (count === item_per_row) {  // End of row
    partyHTML += '</div>';
   }
   // It seems you mistakenly closed one more div in loop
   // is it a typo?
   // partyHTML += '</div>';
});
if (count > 0) {  // Close the last row if it exist.
  partyHTML += '</div>';
}
$('#appendClasses').html(partyHTML);

然而，当你使用纯文本来管理代码时(因为你似乎在每次迭代中添加了一个额外的</div>)，它很难维护，因为你使用jQuery，我建议你使用它的api来管理dom元素和它们的属性…等，这将更容易维护和做将来的更改。

var parties = [
  {id: 1},
  {id: 2},
  {id: 3},
  {id: 4},
  {id: 5}
];
// Items per row.
var items_per_row = 3;
// current item counts in a row.
var item_count = 0;
// Create a row to place the created divs
var $row = $('<div>').addClass('row');
// Get target to place these items.
var $target = $('#appendClasses');
$.each(parties, function(partyIdx, party) {
  /*optional stuff to do after success */
  // Just use jquery's function to create the dom elements would be more clear.
  
  var div = $('<div>');            // Create div.
  
  var p = $('<p>').text(party.id);  // Create p and add text to it.
  div
    .addClass('col-md-4')     // add class `col-md-4` to div
    .append(p)                         // append the p to the div
    .appendTo($row);           // append the div to the row.
  
  ++item_count;
  
  // When item count reach limit, append row to target
  // and create a new row for later elements.
  if (item_count === items_per_row) {    
    $row.appendTo($target);
    $row = $('<div>').addClass('row');
    item_count = 0;
  }
});
if (item_count > 0) {
  $row.appendTo($target);
}

.row {
  margin-bottom: 10px;
  border: solid 1px blue;
  padding: 10px;
  width : 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "appendClasses"></div>

你可以在其他每个主体中使用，当json结构会像这里一样-我的快速柱塞代码。你可以从服务器数组的数组返回，然后它将很好地解析和渲染它像你需要的。

[
  [{id: 1}, {id: 2}, {id: 3}],
  [{id: 4}, {id: 5}, {id: 6}]
]

，然后这段代码将工作得很好:

$.each(partyURLResponse.data, function(partyIdx, party) {
    /*optional stuff to do after success */
    partyHTML += '<div class = "row">';
    $.each(party, function(id, item) {
      partyHTML += '<div class = "col-md-4">';
      partyHTML += '<p>' + item.id + '</p>';
      partyHTML += '</div>';
    });
    partyHTML += '</div>';
  });
  $('#appendClasses').append(partyHTML);
});

这是另一种使用最少代码的方法。我留下了内联注释来表示每行的作用。

var parties = [{id: 'p1'},{id: 'p2'},{id: 'p3'},{id: 'p4'},{id: 'p5'},{id: 'p6'}],
	//Create empty containers for later use
	$html = $rows = $(),
	//Break limit
    colsPerWrap = 3;
$.each(parties, function(partyIdx, party) {
	//Create a jQuery object with the desired content
    var $col = $("<div/>", {
        'class': 'col-md-4',
        'html': '<p>' + party.id + '</p>'
    });
	//Add the created object to the container
    $rows = $rows.add($col);
	//At every break limit
    if ( (partyIdx+1) % colsPerWrap === 0 ) {
	    //Append the cols to the inner wrapper
        var $wrap = $("<div/>", { 'class': 'row' });
        $wrap.append($rows);
	    //Empty the container for the next iteration
        $rows = $();
	    //Populate the container with each inner wrapper
        $html = $html.add($wrap);
    }
});
//Always append outside the loop as DOM scan is expensive!
$('#appendClasses').empty().append($html);

.row {
    border: 1px solid green;
    margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "appendClasses"></div>