Jquery在容器中重新排序div答案

【问题标题】：Jquery reorder div in containerJquery在容器中重新排序div
【发布时间】：2016-02-16 17:57:54
【问题描述】：

我需要以这种方式对一个容器上的一组 3 个 div 进行排序。

div 类 A

div 类 B

div 类 A

div 类 B

每 3 个 div 必须是 B 类，我怎样才能做到这一点，然后将新订单推送到容器？

谢谢，

【问题讨论】：

你尝试了什么？请出示您的代码。
我正在尝试使用容器的元素对数组进行排序
从 Fiddle 或 Codepen 发布一些代码会有所帮助。您是在尝试使用 jQuery 将这些元素动态添加到页面中，还是它们已经在页面上，而您只是试图根据它们的类名重新组织它们？
对不起，我还没有完全理解这些工具，让我花点时间做一个小提琴......元素已经在页面上，是的，我只是试图根据类名重新组织它们，我想我可以使用容器上的元素数组并在之前对它们进行排序。
这里有一个Fiddle 我需要每三个位置的红色。

标签： javascript jquery dragula

【解决方案1】：

为了帮助您开始，这里是您可以解决问题的多种方法之一。

本示例使用querySelectorAll 查找两种类型的块。然后它使用循环将块移动到所需的顺序。

要查看完整的演示，请单击“显示代码 sn-p”，然后单击蓝色的“运行代码”按钮。

function sort(e) {
  var a, b, i;
  a = e.querySelectorAll('.noticia:not(.publicidad)');
  b = e.querySelectorAll('.noticia.publicidad');
  for (i = 0; i < b.length; i++) e.insertBefore(b[i], a[2 + i * 2]);
}

function sort(e) {
  var a, b, i;
  a = e.querySelectorAll('.noticia:not(.publicidad)');
  b = e.querySelectorAll('.noticia.publicidad');
  for (i = 0; i < b.length; i++) e.insertBefore(b[i], a[2 + i * 2]);
}


function test() {
  var i, e = document.getElementsByClassName('carrusel');
  for (i = 0; i < e.length; i++) sort(e[i]);
}

.carrusel {
  height: 20px;
  width: 100%;
  display: table;
  background-color: lightgray;
  border: 1px black solid;
  font-family: sans-serif;
  margin-bottom: 4px;
}
.carrusel .noticia {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  border-right: 1px black solid;
}
.carrusel .publicidad {
  background-color: firebrick;
  color: white;
}
.carrusel:last-child {
  border: none;
}

<button onclick="test()">Test</button> Click to sort by class name ( AA-B-AA-B... )
<p>
<div class="carrusel">
  <div class="noticia">A1</div>
  <div class="noticia">A2</div>
  <div class="noticia publicidad">B2</div>
  <div class="noticia publicidad">B1</div>
  <div class="noticia">A3</div>
  <div class="noticia">A4</div>
</div>

<div class="carrusel">
  <div class="noticia">A1</div>
  <div class="noticia publicidad">B1</div>
  <div class="noticia">A2</div>
  <div class="noticia publicidad">B2</div>
  <div class="noticia">A3</div>
  <div class="noticia">A4</div>
</div>

Any number of elements...
<div class="carrusel">
  <div class="noticia publicidad">B1</div>
  <div class="noticia">A1</div>
  <div class="noticia">A2</div>
  <div class="noticia">A3</div>
  <div class="noticia">A4</div>
  <div class="noticia publicidad">B2</div>
  <div class="noticia">A5</div>
  <div class="noticia publicidad">B3</div>
  <div class="noticia">A6</div>
  <div class="noticia publicidad">B4</div>
  <div class="noticia">A7</div>
  <div class="noticia">A8</div>
</div>

Odd number of elements...
<div class="carrusel">
  <div class="noticia">A1</div>
  <div class="noticia publicidad">B1</div>
  <div class="noticia">A2</div>
  <div class="noticia publicidad">B2</div>
  <div class="noticia">A3</div>
</div>

【讨论】：