0

HTML:

<div id="parent">
   <div class="child">1</div>
   <div class="child">2</div>
   ...
   <div class="child">X</div>
</div>

I have shuffled the order of divs via JS. Now I want to restore original order.

I have tried this JS:

function restoreOrder() {
  var container = document.getElementById("parent");
  var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('child'));
  elementsArray.forEach(function(element){
    container.removeChild(element);
  })
  restoreArray(elementsArray);
  elementsArray.forEach(function(element){
  container.appendChild(element);
})
}

var restoreArray = function(array) {
var m = array.length, t, i;

while (m) {
    i = Math.floor(Math.random() * m--);
    array[m] = i;
}

return $filter('parent')(array, 'child');
}

But it seems all elements of class child just disappear. Anyone can help with this?

miii
  • 21
  • 5
  • It is a bit weird that you consider "original" as something that can be produced with `Math.random`... I wouldn't that call "original", but randomised. – trincot Aug 19 '21 at 20:18
  • Can you please create jsfiddle demo of it? – Harsh Mittal Aug 19 '21 at 20:24
  • FYI: [Don't use `getElementsByClassName()`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474). Instead of `var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('child'));` and then `elementsArray.forEach()`, just write `container.querySelectorAll(".child").forEach()`. – Scott Marcus Aug 19 '21 at 20:26
  • 1
    @HarshMittal There's no need for jsFiddle. Executable code should be embedded right here into the question via a Stack Snippet. Links to external sources can die over time and then we'd have no code. – Scott Marcus Aug 19 '21 at 20:27
  • 2
    Why not store the original indexes before shuffling and then just reapply them? – Scott Marcus Aug 19 '21 at 20:29
  • Or, depending on the amount of data in the set of elements, you could start with a `template` that contains the divs, inject the template into the DOM, shuffle the `div` elements and when it's time to put them back, remove the parent container and just re-inject from the original template. – Scott Marcus Aug 19 '21 at 20:37
  • Thank you all. I think the issue was really based on Math.random ... so further thoughts on this I rather used the method to save the original DIV on document ready function and then reload it back with .html and .data ones. Im posting solution to my problem down below. – miii Aug 21 '21 at 11:25

1 Answers1

0

This has solved my issue with restoring original div order and it was simplier to implement for me as a beginner:

///saving the original element content on document ready
$(document).ready(function() {
  $('#parent').data('original-state', $('#parent').html());
});

///calling back the original element content on btn click
function restoreOrder(){
  $('#parent').html($('#parent').data('original-state'));
}
///ofc as a general cmmd this will override all the changes made to an element after document ready tho, but it has covered the purpose of restoring order of the divs
miii
  • 21
  • 5