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

});

每隔一定数量的子项添加新行

1 个答案: