Reverse order only of divs with same class inside other divs

Question

My problem is here: http://jsfiddle.net/9vhobdw7/2/

<div class="c-container">
  <div>Container 4
    <div>my div 4</div>
    <div class="item">4</div>
  </div>
  <br>
  <div>Container 3
    <div>my div 3</div>
    <div class="item">3</div>
  </div>
  <br>
  <div>Container 2
    <div>my div 2</div>
    <div class="item">2</div>
  </div>
  <br>
  <div>Container 1
    <div>my div 1</div>
    <div class="item">1</div>
  </div>
</div>

I'd like to have only the divs with class="item" in reverse order, from bottom to top. Other divs need to be the same. Like this:

<div class="c-container">
  <div>Container 4
    <div>my div 4</div>
    <div class="item">1</div>
  </div>
  <br>
  <div>Container 3
    <div>my div 3</div>
    <div class="item">2</div>
  </div>
  <br>
  <div>Container 2
    <div>my div 2</div>
    <div class="item">3</div>
  </div>
  <br>
  <div>Container 1
    <div>my div 1</div>
    <div class="item">4</div>
  </div>
</div>

Actually in the divs class="item" I have a call from divs from external URL with function load:eq(n).

I've tried with CSS, .each().reverse(), Array, replaceWith() and more functions but nothing, have no significant result.

Edit, add task. Now, if the task includes more classes, with divs inside to reverse as

<div class="c-container">
<div>Container 6
<div>my div 6</div>
<div class="item2">3</div>
</div>
<br>
<div>Container 5
<div>my div 5</div>
<div class="item1">1</div>
</div>
<br>
<div>Container 4
<div>my div 4</div>
<div class="item2">2</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item2">1</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item1">2</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item1">3</div>
</div>
</div>

I have to duplicate the function changing the variables names and classes names? I've tried this

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);

which works, but it seems redundant.

Answer 1

Here's a solution, not really swapping divs, just swapping content:

var items=document.getElementsByClassName("item");
var length=items.length;
for(var i=0; i<Math.floor(length/2); i++) {
  var temp=items[i].innerHTML;
  items[i].innerHTML=items[length-i-1].innerHTML;
  items[length-i-1].innerHTML=temp;
}

items and length are helper var s.
innerHTML can be replaced with innerText .
etc...
Edit: fixed with Math.floor(length/2) . (There's an extra swap when length is odd...)

Answer 2

You can replace innerHtml for div with class item :

$(document).ready(function() {
    var listItems = Array.from(document.getElementsByClassName('item')).map(i=>i.cloneNode(true))
    Array.from(document.getElementsByClassName('item')).forEach((item,index)=>{
      item.innerHTML = listItems[listItems.length-index-1].innerHTML
    })
});

See full example in the playground: http://jsfiddle.net/denisstukalov/7uhmzbct/23/

Answer 3

You shouldnt be trying to reverse the divs... You are trying to reverse what those divs display. So, you can build an array of the contents of the "item" divs themselves. Then reverse the order of that array and then replace the innerHTML of your "item" divs.

Example below... it is not the most effecient code because it iterates over your list twice... but for the purposes of showing what you need to do to accomplish what it sounds like you're wanting, I think its more illustrative.

 function reverseItemContents() { var itemDivs = document.getElementsByClassName("item"); var contentList = []; var index; for (index = 0; index < itemDivs.length; index++) { contentList.push(itemDivs[index].innerHTML); } contentList.reverse(); for (index = 0; index < itemDivs.length; index++) { itemDivs[index].innerHTML = contentList[index]; } }

 <button onClick="reverseItemContents()">Reverse Content</button> <div class="c-container"> <br> <div>Container 4 <div>my div 4</div> <div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Eo_circle_blue-grey_white_number-4.svg" width="130"></div> </div> <br> <div>Container 3 <div>my div 3</div> <div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/NYCS-bull-trans-3.svg/1024px-NYCS-bull-trans-3.svg.png" width="130"></div> </div> <br> <div>Container 2 <div>my div 2</div> <div class="item"> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Icon_2_red.svg" width="130"></div> </div> <br> <div>Container 1 <div>my div 1</div> <div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Icon_1_%28set_orange%29.png" width="130"></div> </div> </div>

Answer 4

My method would be to simply select them all, reverse the array, and then overwrite the original items. Using outerHTML means that more than just the div s' contents will be swapped.

 function reverse(selector) { const children = document.querySelectorAll(selector); const reversed = [...children].reverse(); children.forEach((item, i) => item.outerHTML = reversed[i].outerHTML); }

 <div class="c-container"> <div>Container 4 <div>my div 4</div> <div class="item" style="background-color: tomato;">4</div> </div> <br> <div>Container 3 <div>my div 3</div> <div class="item" style="background-color: orange;">3</div> </div> <br> <div>Container 2 <div>my div 2</div> <div class="item" style="background-color: yellow;">2</div> </div> <br> <div>Container 1 <div>my div 1</div> <div class="item" style="background-color: lightgreen;">1</div> </div> </div> <button onclick="reverse('.c-container.item')">Reverse</button>

I don't really see a need to add all the extra complexity proposed by the other answers. Using an arugment will allow you to re-use the function for other sets of nodes.