reverse order of multiple divs with same class inside other divs

Question

Task is here http://jsfiddle.net/1jx6wp03/

<div class="c-container">
  <div>Container 6
    <div>my div 6</div>
    <div class="item2" style="background-color: red; color:#ffffff">3</div>
  </div>
  <br>
  <div>Container 5
    <div>my div 5</div>
    <div class="item1" style="background-color: lightgreen;">1</div>
  </div>
  <br>
  <div>Container 4
    <div>my div 4</div>
    <div class="item2" style="background-color: red; color:#ffffff">2</div>
  </div>
  <br>
  <div>Container 3
    <div>my div 3</div>
    <div class="item2" style="background-color: red; color:#ffffff">1</div>
  </div>
  <br>
  <div>Container 2
    <div>my div 2</div>
    <div class="item1" style="background-color: lightgreen;">2</div>
  </div>
  <br>
  <div>Container 1
    <div>my div 1</div>
    <div class="item1" style="background-color: lightgreen;">1</div>
  </div>
</div>

onload the same class divs need to be reversed with the result

<div class="c-container">
  <div>Container 6
    <div>my div 6</div>
    <div class="item2" style="background-color: red; color:#ffffff">1</div>
  </div>
  <br>
  <div>Container 5
    <div>my div 5</div>
    <div class="item1" style="background-color: lightgreen;">1</div>
  </div>
  <br>
  <div>Container 4
    <div>my div 4</div>
    <div class="item2" style="background-color: red; color:#ffffff">2</div>
  </div>
  <br>
  <div>Container 3
    <div>my div 3</div>
    <div class="item2" style="background-color: red; color:#ffffff">3</div>
  </div>
  <br>
  <div>Container 2
    <div>my div 2</div>
    <div class="item1" style="background-color: lightgreen;">2</div>
  </div>
  <br>
  <div>Container 1
    <div>my div 1</div>
    <div class="item1" style="background-color: lightgreen;">3</div>
  </div>
</div>

I tried with this which works great, but it seems a little bit redundant. Btw, I have access to HTML and I have more than 2 classes (item3, item4 and so on) and the functions on classes have to work simultaneously.

 const children1 = document.querySelectorAll('.c-container.item1'); const reverse1 = [...children1].reverse(); children1.forEach((item, i) => item.outerHTML = reverse1[i].outerHTML); const children2 = document.querySelectorAll('.c-container.item2'); const reverse2 = [...children2].reverse(); children2.forEach((item, i) => item.outerHTML = reverse2[i].outerHTML);

 <div class="c-container"> <div>Container 6 <div>my div 6</div> <div class="item2" style="background-color: red; color:#ffffff">3</div> </div> <br> <div>Container 5 <div>my div 5</div> <div class="item1" style="background-color: lightgreen;">1</div> </div> <br> <div>Container 4 <div>my div 4</div> <div class="item2" style="background-color: red; color:#ffffff">2</div> </div> <br> <div>Container 3 <div>my div 3</div> <div class="item2" style="background-color: red; color:#ffffff">1</div> </div> <br> <div>Container 2 <div>my div 2</div> <div class="item1" style="background-color: lightgreen;">2</div> </div> <br> <div>Container 1 <div>my div 1</div> <div class="item1" style="background-color: lightgreen;">1</div> </div> </div>

Answer 1

first you make array like let x = [1,2,3,4,5,6] then give every div reverse indexing value and then then that value put into this array and then put that value in for loop and one by one as per loop allow it to visible as per i+1 condition of for loop.you can run successfully reverse your div.

Answer 2

Put it in a function and run it twice. You just have to make sure to use the correct selectors.

 const reverser = selector => { const arr = document.querySelectorAll(selector); const rev = [...arr].reverse(); arr.forEach((e, i) => e.outerHTML = rev[i].outerHTML); }

 [class^=item] { padding: 0.3em; }.c-container>div, button { margin-top: 1rem; }

 <button onclick="reverser('.item1')">Reverse Group 1</button> <button onclick="reverser('.item2')">Reverse Group 2</button> <div class="c-container"> <div>Container 8 <div>my div 8</div> <div class="item2" style="background: forestgreen;">Swap-group 2, item 3</div> </div> <div>Container 7 <div>my div 7</div> <div class="item1" style="background: mediumvioletred;">Swap-group 1, item 3</div> </div> <div>Container 6 <div>my div 6</div> <div class="item2" style="background: limegreen;">Swap-group 2, item 2</div> </div> <div>Container 5 <div>my div 5</div> <div class="item2" style="background: mediumseagreen;">Swap-group 2, item 1</div> </div> <div>Container 4 <div>my div 4</div> <div class="item1" style="background: deeppink;">Swap-group 1, item 2</div> </div> <div>Container 3 <div>my div 3</div> <div class="item1" style="background: hotpink;">Swap-group 1, item 1</div> </div> <div>Container 2 <div>my div 2</div> <div class="item2" style="background: lightgreen;">Swap-group 2, item 0</div> </div> <div>Container 1 <div>my div 1</div> <div class="item1" style="background: lightpink;">Swap-group 1, item 0</div> </div> </div>