javascript 水平翻转具有相同 class 名称的 div

Question

我有一堆这样的 div:

我想做的是翻转 div，因此第一个元素成为最后一个元素，最后一个元素成为第一个元素，基本上翻转 div，因此 1element、2element、3element 将变为 3element、2element、1element。

我不确定这是否可行，因为没有什么可以区分这些 div，因为它们都具有相同的 ID 和 class 名称。

这个问题与这个问题类似：Javascript only - sort a bunch of DIVs 除了这里的 div 具有相同的 id，class 名称，所以它使一切变得更难。

Answer 1

...as there is nothing to distinguish those divs as they all have the same id and class name...

啊，但是有！他们在 parent 中的位置。您可以获得一个元素数组，反转它，然后将它们附加到 parent，这将移动它们，使它们处于相反的顺序：

var container = document.getElementById("container");
var divs = Array.from(container.children);
divs.reverse();
divs.forEach(function(div) {
    container.appendChild(div);
});

实例：

setTimeout(function() {
    var container = document.getElementById("container");
    var divs = Array.from(container.children);
    divs.reverse();
    divs.forEach(function(div) {
        container.appendChild(div);
    });
}, 800);

.ib {
    display: inline-block;
}

<div id="container"><div class="ib">1</div><div class="ib">2</div><div class="ib">3</div><div class="ib">4</div><div class="ib">5</div></div>

请注意，我在标记时非常小心，因此其中不会有任何文本节点，因为 children 集合仅包含元素，不包含文本节点。但是如果你想反转所有的 children，包括文本节点，使用 childNodes 而不是 children:

setTimeout(function() {
    var container = document.getElementById("container");
    var divs = Array.from(container.childNodes);
    divs.reverse();
    divs.forEach(function(div) {
        container.appendChild(div);
    });
}, 800);

.ib {
    display: inline-block;
}

<div id="container">
    <div class="ib">1</div>
    <div class="ib">2</div>
    <div class="ib">3</div>
    <div class="ib">4</div>
    <div class="ib">5</div>
</div>

请注意，我将代码保持在 ES5 级别（而不是 ES2015+），除了 Array.from 是更新的。你可以很容易地填充它，或者使用

var divs = Array.prototype.slice.call(container.children/*or childNodes*/);

相反。

Answer 2

您可以先使用 class 获取所有元素，将其转换为数组并调用翻转数组的 reverse() 函数，然后循环遍历反向数组并将子项追加回您的目标div.

示例代码

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      Original: 
      <div class="test">1</div>
      <div class="test">2</div>
      <div class="test">3</div>
      <div class="test">4</div>
      <div class="test">5</div>
    </div>
    <br />
    <div id="target">
      Reversed:
      <!-- Will be created with Javascript -->
    </div>

    <script>
      const reversedDivs = Array.from(document.getElementsByClassName("test")).reverse();
      const targetDiv = document.getElementById("target");

      // Create another list in reversed order
      reversedDivs.forEach(div => {
        const newDiv = div.cloneNode(true);
        targetDiv.appendChild(newDiv);
      })

    </script>
  </body>
</html>

这是一个工作示例：https://codesandbox.io/s/html-reverse-list-u3kld?fontsize=14&hidenavigation=1&theme=dark

javascript 水平翻转具有相同 class 名称的 div

javascript flipping divs with the same class name horizontaly

html

javascript

sorting

flip