Jquery reorder div in container

Question

I need to sort a set of 3 divs on a container in this way.

div class A

div class A

div class B

div class A

div class A

div class B

every 3rd div must be class B, how can i do this and then push te new order to the container ?

Thanks,

Answer 1

To help you get started, here is one of many ways you might attack the problem.

This example uses querySelectorAll to find the two types of blocks. Then it uses a loop to move the blocks into the desired order.

To view the complete demo, click "Show code snippet" and then the blue "Run code" button.

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>