Reverse Order Of Multiple Divs With Same Class Inside Other Divs

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

Container 6

my div 6

Copy

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

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

Solution 2:

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.

Share