Как задать необходимый порядок в списке <ol> в JavaScript

233

04 сентября 2017, 07:56

Есть список, который необходимо расположить в порядке убывания соответствующих значений в input. Строка с максимальным значением input должна быть в самом верху, а минимальным в самом низу списка(должен быть порядок по убыванию). Все это должно произойти при нажатии на кнопку. К кнопке пока не привязал, суть в работе функции.

var list = document.querySelectorAll("li"); 
var inputs = document.querySelectorAll("input"); 
function rev() { 
  var max = 0; 
  var stab = 0; 
  for(var i = 0; i < 4; i++){ 
    if(max < parseInt(inputs[i].value)) { 
      list[stab].before(list[i]); 
      max = parseInt(inputs[i].value); 
      stab = i; 
    }   
  } 
  console.log(max); 
  console.log(stab); 
} 
rev();

<h1>Just Test</h1> 
<ol> 
	<li id="t1">One <input type="number" value="1"></li> 
	<li id="t2">Two <input type="number" value="2"></li> 
	<li id="t3">Three <input type="number" value="3"></li> 
	<li id="t4">For <input type="number" value="4"></li> 
</ol> 
<button>Sort</button>

В таком исполнении все работает как надо, но если поменять значение input в 3 строке, например на 5, то код уже работает неверно.

Answer 1

let ol = document.querySelector('ol'); 
let lis = [...document.querySelectorAll('li')]; 
 
function sort() { 
  // удаляем все элементы <li> из <ol> 
  for (let li of lis) { 
    li.remove(); 
  } 
 
  lis 
    // преобразуем массив элементов <li> в массив пар [элемент <li>, соответствующий ему <input>] 
    .map(li => [li, li.querySelector('input')]) 
    // сортируем массив пар 
    .sort((a, b) => b[1].value - a[1].value) 
    // добавляем все элементы <li> в <ol> 
    .forEach(pair => ol.appendChild(pair[0])); 
} 
 
sort(); 
 
// вешаем обработчик на кнопку 
document.querySelector('button').addEventListener('click', sort);

<h1>Just Test</h1> 
<ol> 
  <li id="t1">One <input type="number" value="1"></li> 
  <li id="t2">Two <input type="number" value="2"></li> 
  <li id="t3">Three <input type="number" value="3"></li> 
  <li id="t4">For <input type="number" value="4"></li> 
</ol> 
<button>Sort</button>

Answer 2

sort.addEventListener("click",()=>{ 
  let a = [], b; 
  [].forEach.call(document.querySelectorAll("ol > li"), (c)=>a.push([c.children[0].value,c])); 
  b = a.sort((a,b)=>b[0]-a[0]); 
  b.forEach((c)=>c[1].parentNode.appendChild(c[1])); 
});

<h1>Just Test</h1> 
<ol> 
	<li id="t1">One <input type="number" value="1"></li> 
	<li id="t2">Two <input type="number" value="2"></li> 
	<li id="t3">Three <input type="number" value="3"></li> 
	<li id="t4">For <input type="number" value="4"></li> 
</ol> 
<button id="sort">Sort</button>