如何使用 TinySort.js 取消嵌套 HTML 元素的排序-解网

问：

我需要用TinySort.js对一些嵌套列表进行排序（升序/降序），并且我需要稍后能够对它们进行取消排序（没有jquery：请只是普通的javascript）。

正如 TinySort 的作者 sjeiti 所建议的那样，在对每个列表元素进行排序之前，我使用 javascript 为它们分配一个位置属性，这样我以后就可以恢复它们的原始顺序（取消排序）。

对于一个简单的列表，我没有问题（排序/取消排序效果很好）：https://jsfiddle.net/abubelinha/t7dcjhak/

对于嵌套列表，我按照 Bergi 的这种方法对它们进行了排序。但是我以后无法对它们进行分类。以下是我到目前为止所取得的成就：https://jsfiddle.net/abubelinha/wn9o3gft/......但是我收到此错误：
tinysort.min.js:10 Uncaught TypeError: d.getAttribute is not a function

var listElements = document.querySelectorAll('*');
function setInitialOrder() {
  for (var i = 0, l = listElements.length; i < l; i++) {
    listElements[i].setAttribute('position1', i);
  }
}
setInitialOrder();

function sortNested(sortby={}) {
  var lists = document.querySelectorAll('ul.memberlist');
  lists.forEach((li_item) => {
    tinysort(li_item.children, sortby);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/3.2.5/tinysort.min.js"></script>
<ul class="memberlist">
   <li><a class="function">FFF</a></li>
   <li><a class="class">XXX</a>
      <ul class="memberlist">
      <li><a class="function">1x</a></li>
      <li><a class="function">3x</a></li>
      <li><a class="variable">2x</a></li>
      </ul>
   </li>
   <li><a class="class">AAA</a>
      <ul class="memberlist">
      <li><a class="variable">9a</a></li>
      <li><a class="function">5a</a></li>
      </ul>
   </li>
</ul>
<style> .tsort {background-color: lightgrey; padding: 3px; cursor:pointer; border:1px solid;} </style>
<span id="sortAZ" class="tsort" onclick="sortNested();">A-Z</span> 
<span id="sortZA" class="tsort" onclick="sortNested({order:'desc'});">Z-A</span> 
<span id="unsort" class="tsort" onclick="sortNested({attr:'position1'});">original order</span>

非常感谢您的建议。

编辑：@Thomas评论后修改的代码。
已从更改为
tinysort(li_item.childNodes, sortby);tinysort(li_item.children, sortby);

更多信息请点击此处。

JavaScript HTML 嵌套列表 tinysort

谢谢@Thomas，是诀窍（我编辑了代码，现在它可以工作了）。但我不明白为什么适用于 AZ 和 Z-A 排序，而不是取消排序。如果你能详细说明一个答案来解释这一点，我确实会接受。至于你对内在的评论，我不明白你的意思。.children.childNodesul

答： 暂无答案

上一个：以递归方式遍历嵌套的 HTML 列表

下一个：使用 focus-within 显示带有 CSS 的嵌套列表

如何使用 TinySort.js 取消嵌套 HTML 元素的排序

how to unsort nested html elements with TinySort.js

评论