Question

好的所以我编写了一个使用Bootstrap的页面的前端代码和一些带有5个偶数行的自定义引导程序。

但是现在后端开发人员要求它改变以便你可以把它放到一个循环中，从那个角度来看完全有意义。

所以我有这个HTML

<div class="row-fluid-5">
  <div class="span2">1</div>
  <div class="span2">2</div>
  <div class="span2">3</div>
  <div class="span2">4</div>
  <div class="span2">5</div>
</div>
<div class="row-fluid-5">  
  <div class="span2">6</div>
  <div class="span2">7</div>
  <div class="span2">8</div>
  <div class="span2">9</div>
  <div class="span2">10</div>
</div>

但我需要添加...

</div>
<div class="row-fluid-5">

现在从jQuery

（除非有更好的方法来做到这一点）。

所以我知道HTML看起来像这样

<div class="row-fluid-5">
  <div class="span2">1</div>
  <div class="span2">2</div>
  <div class="span2">3</div>
  <div class="span2">4</div>
  <div class="span2">5</div>
  <div class="span2">6</div>
  <div class="span2">7</div>
  <div class="span2">8</div>
  <div class="span2">9</div>
  <div class="span2">10</div>
</div>

我想使用jQuery append添加结束div并用class =＆＃34; row-fluid-5＆＃34;

重新打开div

我尝试过使用jQuery的2个不同的approches，但都没有给出我想要的结果。

$(".span2:nth-child(4)").append('</div><div class="row-fluid-5"><div class="span2">');

以及

$(".span2").eq(4).append('</div><div class="row-fluid-5"><div class="span2">');

我对此here

有一个小提琴

非常感谢任何帮助！

Answer 1

这里有a fiddle，代码会在需要的地方插入。我所要做的只是用$(function() { })包围你的函数，以便在页面加载时执行它。我还包括jQuery，它没有被加载。

Answer 2

请检查：Jsfiddle并告诉我你的想法。

$(".span2").each(function() {
    var current = $(this);
    if($(this).index() == 4) {
        current.parent().after('<div class="row-fluid-5"></div>');
    } else if($(this).index() > 4) {
        $(".row-fluid-5:nth-child(2)").append($(this).clone());
        $(this).remove();
    }
});

Answer 3

我已经创建了一个可以像你想要的那样重新创建DOM的函数，只需传递你想要拆分的索引号。

splitRowAt(5);

function splitRowAt(value){

  $('.row-fluid-5').after('<div class="row-fluid-5 first"></div>');
  $('.first').after('<div class="row-fluid-5 second"></div>');
  $( ".span2" ).each(function( index ) {
    if(index >= value)
      $('.second').append($(this));
    else
      $('.first').append($(this));
  });
  $('.row-fluid-5').first().remove();
}

jQuery追加......也许吧

3 个答案: