主页 / 问题 / 713825
Accepted
Daniyal Lukmanov
Asked:2020-09-03 17:32:56 +0000 UTC2020-09-03 17:32:56 +0000 UTC

如何在 JavaScript 中的 <ol> 列表中设置所需的顺序

  • 772

里面有一个列表需要按照对应值的降序排列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>

在此执行中，一切正常，但如果您将第input3 行中的值更改为 5，例如，则代码已经无法正常运行。

javascript

2 个回答

  1. Best Answer

    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>

    • 1 

  2. 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>

    • 1

相关问题