使用JavaScript排序多个同class的ul列表时遇li.detach报错的解决求助

错误原因 #

1. element.querySelectorAll('li')返回的是原生DOM节点列表，不是jQuery对象，因此没有jQuery提供的detach()方法。
2. 循环中的u是索引数值，不是DOM元素或jQuery对象，执行u.append(li)会引发额外错误。

修正后的jQuery代码 #

$(document).ready(function() {
  // 遍历每个.filelist列表
  $('ul.filelist').each(function() {
    const $currentUl = $(this);
    // 获取当前列表下的所有li（jQuery对象）
    const $listItems = $currentUl.find('li');

    // 按data-sortby数值升序排序后，重新追加到当前列表
    $listItems.sort(function(a, b) {
      return $(a).data('sortby') - $(b).data('sortby');
    }).appendTo($currentUl);
  });
});

代码说明 #

• 使用each()遍历每个目标列表，比for循环更贴合jQuery的使用习惯，避免索引操作错误。
• $(this)直接指向当前遍历的<ul>元素，无需额外索引取值。
• appendTo()会自动将元素从原位置移动到目标位置，无需手动调用detach()。

原生DOM替代方案（无需jQuery） #

如果不想依赖jQuery，可以用原生JS实现：

document.addEventListener('DOMContentLoaded', function() {
  const fileLists = document.querySelectorAll('ul.filelist');
  fileLists.forEach(list => {
    // 将DOM节点列表转为数组，才能使用sort方法
    const items = Array.from(list.querySelectorAll('li'));
    // 按data-sortby数值排序
    items.sort((a, b) => parseInt(a.dataset.sortby) - parseInt(b.dataset.sortby));
    // 清空列表后重新添加排序后的项
    list.innerHTML = '';
    items.forEach(item => list.appendChild(item));
  });
});

验证效果 #

运行修正后的代码后，你的HTML会按期望生成排序后的列表：

<ul class="filelist">
  <li data-sortby="1">1</li>
  <li data-sortby="2">2</li>
  <li data-sortby="3">3</li>
  <li data-sortby="4">4</li>
</ul>
<ul class="filelist">
  <li data-sortby="1">1</li>
  <li data-sortby="2">2</li>
  <li data-sortby="4">4</li>
  <li data-sortby="5">5</li>
</ul>

内容的提问来源于stack exchange，提问作者jtt0808