Вернуть сортировку в исходное состояние js / сортировка DOM элементов по алфавиту

#javascript #сортировка #dom

Доброго времени суток!

Можно ли вернуть сортировку в исходное состояние при нажатии кнопки?
https://codepen.io/anon/pen/RerZXE

UPD: ниже @REGISTOOOOOO добавил сортировку по алфавиту DOM элементов. Так же я добавил
в название темы "сортировка DOM элементов по алфавиту", поскольку в интернетах информацию
не нашёл, хоть изначальный вопрос был другой. 
Спасибо всем за помощь!



function sort() {
  var nodeList = document.querySelectorAll('li');
  var itemsArray = [];
  var parent = nodeList[0].parentNode;
  for (var i = 0; i < nodeList.length; i++) {    
    itemsArray.push(parent.removeChild(nodeList[i]));
  }
  itemsArray.sort(function(nodeA, nodeB) {
      var textA = nodeA.querySelector('div:nth-child(2)').textContent;
      var textB = nodeB.querySelector('div:nth-child(2)').textContent;
      var numberA = parseInt(textA);
      var numberB = parseInt(textB);
      if (numberA < numberB) return -1;
      if (numberA > numberB) return 1;
      return 0;
    })
    .forEach(function(node) {
      parent.appendChild(node)
    });
}
body {  
  font-family: 'Trebuchet MS', sans-serif;
  color: #444;
  font-size: 14px;
}
ul {
  margin: 15px;
  padding: 5px 15px;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 3px;
  list-style: none;
}
li {
  padding: 10px; 
}
li:not(:last-child) {
   border-bottom: 1px dotted #ddd;
}
button {
  margin: 10px 15px;
  border: 1px solid #eee;
  border-radius: 3px;
  background: #fff;
  padding: 8px;
  min-width: 100px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: #444;
}
button:hover {
  background-color: #fbfbfb;
}


  
	
	
	
	
	
	
  
 
	  

    
Текст
5
Текст
    
Текст
15
Текст
    
Текст
2
Текст
    
Текст
20
Текст
    
Текст
1
Текст
  
  
  
 




    

Ответы

Ответ 1

function sort(aRestore) { // !!! - параметр
  var nodeList = document.querySelectorAll('li');
  var itemsArray = [];
  var parent = nodeList[0].parentNode;
  
  for (var i = 0; i < nodeList.length; i++) {
    // !!! - здесь
    if (!nodeList[i].dataset.originalorder)
      nodeList[i].dataset.originalorder = i + 1;

    itemsArray.push(parent.removeChild(nodeList[i]));
  }
  
  itemsArray.sort(function(nodeA, nodeB) {
    // !!! - и здесь
    if (aRestore) {
      return nodeA.dataset.originalorder - nodeB.dataset.originalorder;
    }

    var textA = nodeA.querySelector('div:nth-child(2)').textContent;
    var textB = nodeB.querySelector('div:nth-child(2)').textContent;
    var numberA = parseInt(textA);
    var numberB = parseInt(textB);
    if (numberA < numberB) return -1;
    if (numberA > numberB) return 1;
    return 0;
  }).forEach(function(node) {
    parent.appendChild(node)
  });
}
body {
  font-family: 'Trebuchet MS', sans-serif;
  color: #444;
  font-size: 14px;
}

ul {
  margin: 15px;
  padding: 5px 15px;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 3px;
  list-style: none;
}

li {
  padding: 10px;
}

li:not(:last-child) {
  border-bottom: 1px dotted #ddd;
}

button {
  margin: 10px 15px;
  border: 1px solid #eee;
  border-radius: 3px;
  background: #fff;
  padding: 8px;
  min-width: 100px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: #444;
}

button:hover {
  background-color: #fbfbfb;
}

  
Текст
5
Текст
  
Текст
15
Текст
  
Текст
2
Текст
  
Текст
20
Текст
  
Текст
1
Текст





Ответ 2

Тоже сделал сортировку, изучил вариант @igor и некоторое позаимствовал. Добавил сортировку
методом Intl.js с изменением расположения flex элементов.



function sort() {
  // находим нужные элементы
  const nodes = document.querySelectorAll('li');
  // создаем объект Collator библиотеки Intl.js   для поиска
  const collator = new Intl.Collator("ru", {numeric: true, caseFirst: 'upper'});
  // коллбэк для сортировки
  const innerSort = (x, y) => {
    const a = x.querySelector('div:nth-of-type(2)');
    const b = y.querySelector('div:nth-of-type(2)');
    return collator.compare(a.textContent, b.textContent);       
  }
  // делаем массив из nodeList и сортируем согласно коллбэка         
  const arr = [].slice.call(nodes).sort(innerSort);
  // добавляем каждому элементу инлайновый класс 
  // с порядковым номером отображения
  arr.forEach((item, i) => item.style.order = `${i+1}`);
}

function originer() { 
  // удаляем классы для возврата в первоначальное состояние      
  const nodes = document.querySelectorAll('li');
  const deleteOrder = () => nodes.forEach((item) => item.style.order = '')
  deleteOrder()
}
body {  
  font-family: 'Trebuchet MS', sans-serif;
  color: #444;
  font-size: 14px;
}
ul {
  margin: 15px;
  padding: 5px 15px;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 3px;
  list-style: none;
}
li {
  padding: 10px; 
}
li:not(:last-child) {
   border-bottom: 1px dotted #ddd;
}
button {
  margin: 10px 15px;
  border: 1px solid #eee;
  border-radius: 3px;
  background: #fff;
  padding: 8px;
  min-width: 100px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: #444;
}
button:hover {
  background-color: #fbfbfb;
}
ul{
  display:flex;
}


  
    
    
    
    
    
    
  
 
 

    
Текст
5
Текст
    
Текст
АА
Текст
    
Текст
55
Текст
    
Текст
20
Текст
    
Текст
фыв
Текст
    
Текст
аа
Текст
    
Текст
15
Текст