javascript水平翻转具有相同类名的div答案

【问题标题】：javascript flipping divs with the same class name horizontalyjavascript水平翻转具有相同类名的div
【发布时间】：2020-03-20 00:36:32
【问题描述】：

我有一堆这样的 div：

我想做的是翻转 div，所以第一个元素成为最后一个元素，最后一个元素成为第一个元素，本质上是翻转 div，所以 1element,2element,3element 将变为 3element,2element,1element。

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

这个问题和这个问题类似：Javascript only - sort a bunch of DIVs 除了这里的 div 有相同的 id、类名，所以这让一切变得更加困难。

【问题讨论】：

欢迎来到 Stack Overflow！请带上tour，环顾四周，通读help center，尤其是How do I ask a good question? 邮政编码、标记、错误消息等。作为文本，而不是作为文字图片。为什么：meta.stackoverflow.com/q/285551/157247
"...因为它们都有相同的 id..." 那是无效的。 ID 值只能用于文档中的一个元素，不能超过一个。

标签： javascript html sorting flip

【解决方案1】：

您可以先获取类中的所有元素，将其转换为数组并调用翻转数组的 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 无法处理非常大的 html，所以我将如何在 php 中执行此操作？（我正在使用 xpath 和 DOMDocument 将我的 html 放入 DOM）
@LaCalienta 不幸的是我不做 php。你可能需要问一个擅长 php 的人
但是你睁开了我的眼睛:)，询问并得到了php版本:)：stackoverflow.com/questions/59022473/php-xpath-reverse-array

【解决方案2】：

...因为没有什么可以区分这些 div，因为它们都具有相同的 id 和类名...

啊，但是有！他们在他们的父母那里。您可以获取元素数组，将其反转，然后将它们附加到父级，这将移动它们，使它们处于相反的顺序：

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

&lt;div id="container"&gt;&lt;div class="ib"&gt;1&lt;/div&gt;&lt;div class="ib"&gt;2&lt;/div&gt;&lt;div class="ib"&gt;3&lt;/div&gt;&lt;div class="ib"&gt;4&lt;/div&gt;&lt;div class="ib"&gt;5&lt;/div&gt;&lt;/div&gt;

请注意，我在做标记时很小心，因此其中不会有任何 Text 节点，因为 children 集合仅包含 Elements，而不包含 Text 节点。但是如果你想反转所有的孩子，包括文本节点，使用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*/);

改为。

【讨论】：