javascript - Jquery在容器中重新排序div

Question

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

div 类 A

div 类 A

div类B

div 类 A

div 类 A

div类B

每个第三个 div 必须是 B 类，我该怎么做然后将新订单推送到容器？

谢谢，

Answer 1

为了帮助您入门，这里是您可以解决问题的众多方法之一。

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

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

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>