Jquery reorder div in container

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

div class A

div class B

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,

Solution

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>