javascript flipping divs with the same class name horizontaly

Question

I have a bunch of divs like this:

my divs

What I would like to do is flip the divs, so the first element becomes the last and the last element becomes first, essentially flipping divs around so 1element,2element,3element would become 3element, 2element, 1element.

I am not sure if this is even possible as there is nothing to distinguish those divs as they all have the same id and class name.

This question is similar to this one: Javascript only - sort a bunch of DIVs except that here divs have the same id, class name so it makes it all harder.

Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Post code, markup, error messages, etc. **as text**, not as a *picture* of text. Why: http://meta.stackoverflow.com/q/285551/157247 — T.J. Crowder, Nov 24 '19 at 16:10
*"...as they all have the same id..."* That's invalid. An ID value can only be used on **one** element in the document, not more than one. — T.J. Crowder, Nov 24 '19 at 16:10

score 0 · Answer 1 · answered Nov 24 '19 at 16:16

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

Ah, but there is! Where they are in their parent. You can get an array of the elements, reverse it, and then append them to the parent, which will move them so that they're in that reverse order:

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

Live Example:

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>

Note that I was careful to do the markup so that there wouldn't be any Text nodes in there, because the children collection only includes Elements, not Text nodes. But if you want to reverse all the children, including text nodes, use childNodes instead of 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>

Note that I've kept the code to ES5 level (not ES2015+), except that Array.from is more recent. You can easily polyfill it, or use

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

instead.

score 0 · Accepted Answer · answered Nov 24 '19 at 16:23

You can first get all elements with your class, convert it into an array and call reverse() function that flips the array, then loop through the reversed array and append children back to your target div.

Sample codes

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

Here's a working example: https://codesandbox.io/s/html-reverse-list-u3kld?fontsize=14&hidenavigation=1&theme=dark

figured out that javascript won't handle very large html so How would I do this in php? (I am using xpath and DOMDocument to get my html into DOM) — LaCalienta, Nov 24 '19 at 20:46
@LaCalienta Unfortunately I don't do php. You might need to ask someone who is excel in php instead — junwen-k, Nov 25 '19 at 03:22
But you opened my eyes :), asked and got the php version :): https://stackoverflow.com/questions/59022473/php-xpath-reverse-array — LaCalienta, Nov 26 '19 at 09:24

javascript flipping divs with the same class name horizontaly

2 Answers2