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

im trying to sorting an array with the elements of the container — Aliber, Feb 16 '16 at 18:14
Posting some code from a Fiddle or Codepen would help. Are you trying to dynamically add these elements to the page with jQuery or are they already on the page and you're just trying to reorganize them based on their classnames? — HaulinOats, Feb 16 '16 at 18:40
Sorry i dont fully understand these tools yet, let me take a minute to make a Fiddle.... The elements are already on the page and yes im just trying to reorganize them based on the classnames, i think i can use an array of the elements on the container and sort them before. — Aliber, Feb 16 '16 at 18:47
Well heres a [Fiddle](https://jsfiddle.net/AliberWolf/zqouthqn/) i need the red ones to be in every third position. — Aliber, Feb 16 '16 at 18:54
okay, the fiddle is a good start and I posted a solution to help you along. De nada. — Yogi, Feb 16 '16 at 23:49

Yogi · Accepted Answer · 2016-02-17T00:26:43.080

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>

Jquery reorder div in container

1 Answers1