javascript - 每设置数量的孩子添加新行

Question

我正在尝试每 2 个孩子添加一个新行，并且每次将 2 个新孩子放在一个新行中。

起始html：

<div class="row_1"></div>

第一次运行后，我得到：

<div class="newRow">
   <div class="span6" id="content"></div>
</div>
<div class="row_1"></div>

但随着我不断添加，我得到：

<div class="newRow">
  <div class="span6">...</div>
  <div class="span6" id="content">...</div>
  <div class="span6" id="content"></div> <== Empty extra div
</div>
<div class="newRow"></div> <== Empty extra div
<div class="row_1"></div>

预期的结果是

<div class="newRow">
  <div class="span6">...</div>
  <div class="span6" id="content">...</div>
</div>
<div class="newRow">
  <div class="span6">...</div>
  <div class="span6">...</div>
</div>
<div class="row_1"></div>

以下是我正在使用的 jQuery

$(".nav li a").on("click", function(e) {

$('#content').removeAttr('id');

var $row = $(".row_1");
var $rowNew = $('.newRow');

if($rowNew.length < 2){
        $('<div id="content" class="span6"></div>').appendTo('.newRow');
} 

if ($rowNew.children().length > 2) {
        $('<div class="row-fluid new"></div>').insertBefore($row);
}

else {
        $('<div class="row-fluid new"></div>').insertBefore($row);
        $('<div id="content" class="span6"></div>').appendTo('.newRow');
}
});

Answer 1

“最终我解决了它”：

$(".nav li a").on("click", function(e) {

$('#content').removeAttr('id');

var $row = $(".span9");
var $rowNew = $('.new');

if ($rowNew.children().length > 1) {
        $(".span9 div").removeClass("new");
        $('<div class="row-fluid new"></div>').prependTo($row);
}

if ($(".new").length == 0) {
        $('<div class="row-fluid new"></div>').prependTo($row);
        $('<div id="content" class="span6"></div>').appendTo('.new');
} else {
    $('<div id="content" class="span6"></div>').appendTo('.new');
}

});