jQuery附加。。。大概

好的，我为一个页面编写了前端代码，该页面使用引导和一些自定义引导，用于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>

1.
2.
3.
4.
5.
6.
7.
8.
9
10

但是我需要加上

</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>

1.
2.
3.
4.
5.
6.
7.
8.
9
10

我想使用jqueryappend添加结束div，并使用class=“row-fluid-5”重新打开该div

我尝试过使用两种不同的jQuery方法，但都没有给出我想要的结果

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

$（“.span2:n子项（4）”）.append（“”）；

还有这个

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

$（“.span2”）.eq（4）.追加（“”）；

我有一把小提琴

任何帮助都将不胜感激

检查这个：如果这是你想要的，请告诉我

$(".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();
    }
});

$（.span2”）。每个（函数（）{
var current=$（此）；
if（$（this）.index（）==4）{
当前的.parent（）。在（“”）之后；
}else if（$（this）.index（）>4）{
$（“.row-fluid-5:nth child（2）”）.append（$（this.clone（））；
$（this.remove（）；
}
});

以下是需要插入的代码。

---

我所要做的就是用

$（function（）{}）

包围函数，以便在页面加载时执行它。我还包括了未加载的jQuery。

我创建了一个函数，可以按照您的要求重新创建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();
}

splitRowAt（5）；
函数splitRowAt（值）{
$（'.row-fluid-5'）。在（''）之后；
$（'.first'）。在（''）之后；
$（“.span2”）。每个（函数（索引）{
如果（索引>=值）
$（'.second'）。追加（$（this））；
其他的
$（'.first'）。追加（$（this））；
});
$（'.row-fluid-5'）.first（）.remove（）；
}

也许您可以用jQuery重建html结构。它将看起来更干净，并在其他情况下动态工作？因此它不像用“Get converted to”替换第6个那样容易。jquery使用元素节点，而不是部分html字符串。不要在前端执行此操作，请在后端执行此操作。始终在答案本身中发布代码。即使外部链接腐烂，您的答案也应该具有未来意义。

current.append（“”）不做你认为它做的事。正是我需要的！很抱歉没有包括jQuery，完全没有考虑到这一点。谢谢你的帮助！干杯但这根本不能产生你想要的结果？这是一种非常有趣的方法，但当我应用它时，我得到3行流体-5，我得到第二行，然后第一行，然后第二行抱歉，我混合了div的顺序。更正了上面的代码，现在应该可以正常工作了。