在其他div中具有相同class的多個div的相反順序

Question

任務在這里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>

加載相同的 class div 需要反轉結果

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

我試過這個效果很好，但它似乎有點多余。 順便說一句，我可以訪問 HTML 並且我有超過 2 個類（item3、item4 等），並且類上的功能必須同時工作。

 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

首先你制作像 let x = [1,2,3,4,5,6] 這樣的數組，然后給每個 div 反向索引值，然后將該值放入該數組中，然后將該值放入 for 循環中，並一個接一個地作為每個循環允許它根據 for 循環的 i+1 條件可見。您可以成功運行反轉您的 div。

Answer 2

將其放入 function 並運行兩次。 您只需要確保使用正確的選擇器。

 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>