排序和取消排序功能答案

【问题标题】：Sorting and unsorting function排序和取消排序功能
【发布时间】：2022-01-12 23:52:40
【问题描述】：

我制作了排序脚本（A到Z）

我的问题是我需要添加什么来获得 unsort 功能，我的意思是设置为 default（在你对它们进行排序之前是怎样的）。

代码：

function sortList() {
  document.getElementById('sortedtxt').innerHTML = 'Sorted A-Z';
  document.getElementById('sortedtitle').innerHTML = 'BFMAS - Sorted A-Z';
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("sortingUL");
  switching = true;
  while (switching) {
    switching = false;
    b = list.getElementsByTagName("LI");
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}

【问题讨论】：

我认为这是不可能的，除非您在排序前将订单存储在某个地方。
复制一份初始列表
@johnSmith 除了考虑到他们在这里的实现方式之外，这将是 DOM 元素的副本...... ????
在对所有元素进行排序之前设置数据索引。然后，您可以使用这些值。也奇怪你不只是使用 array.sort()
@Inigo 我怀疑会有任何可识别的性能影响或任何让你 ????实际上，为每次迭代进行 dom 操作比替换/追加一次更无效

标签： javascript list function sorting

【解决方案1】：

请使用此代码 JS & HTML

  let globalList, temp = [], sorted = true;

  document.getElementById("sort").addEventListener('click', sortList);
  document.getElementById("unsorted").addEventListener('click', UnsortedList);

  function UnsortedList() {
    let currentList = document.getElementById("countries");
    currentList.innerHTML = '';
    temp.forEach(function (item) {
      let li = document.createElement('li');
      currentList.appendChild(li);
      li.innerHTML += item;
    });
    sorted = true;
  }

  function getTempArray(pList) {
    globalList = pList.getElementsByTagName("li");
    temp = [];
    for (let j = 0; j < globalList.length; j++) {
      temp.push(globalList[j].innerText);
    }
  }

  function sortList() {
    let list, i, switching, b, shouldSwitch;
    list = document.getElementById("countries");

    if (sorted === true) {
      getTempArray(list);
      sorted = false;
    }

    switching = true;

    while (switching) {
      switching = false;
      b = list.getElementsByTagName("li");
      for (i = 0; i < (b.length - 1); i++) {
        shouldSwitch = false;
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
      if (shouldSwitch) {
        b[i].parentNode.insertBefore(b[i + 1], b[i]);
        switching = true;
      }
    }
  }

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Pues </title>
</head>
<body>
<p>Click the button to sort the list alphabetically ?</p>
<button id="sort"><b>Sort</b></button>
<button id="unsorted"><i>Unsorted</i></button>

<ul id="countries">
    <li>Peru</li>
    <li>Argentina</li>
    <li>Brazil</li>
    <li>Colombia</li>
    <li>Paraguay</li>
    <li>Bolivia</li>
</ul>

</body>
</html>

【讨论】：

运行代码片段?
谢谢，它正在工作：D

【解决方案2】：

首先，您在原地（就地）对 DOM 元素进行排序，而不是拥有一个单独的列表数据结构（例如数组）并将 DOM 视为一个视图……即渲染列表数据，这似乎有点疯狂根据需要进入 DOM（即在更新后或排序后）。