Javascript 使用每个项目的数据字符值，按数字和字母顺序对UL进行排序

我想用数字和字母顺序对这个UL进行排序，使用每个项目的数据字符值

注意：我只想排序父UL，而不是子UL元素

<ul>
  <li data-char="w">
    <span>W</span>
    <ul>
      <li>WWWWWWWWWWWWWW</li>
    </ul>
  </li>
  <li data-char="5">
    <span>5</span>
    <ul>
      <li>55555555555555</li>
    </ul>
  </li>
   <li data-char="a">
    <span>A</span>
    <ul>
      <li>AAAAAAAAAAAAAA</li>
    </ul>
  </li>
    <li data-char="1">
    <span>1</span>
    <ul>
      <li>11111111111</li>
    </ul>
  </li>
</ul>

W

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww



5.

555555555555



A.

AAAAAAAAAAAAAA



1.

11111111

通过执行以下操作，我可以通过jQuery实现这一点：

function sortCharLi(a, b) {

    var va = a.dataset.char.toString().charCodeAt(0),
        vb = b.dataset.char.toString().charCodeAt(0);

    // add weight if it's a number
    if (va < 'a'.charCodeAt(0)) va += 100;
    if (vb < 'a'.charCodeAt(0)) vb += 100;

    return vb < va ? 1 : -1;
}

$('ul > li').sort(sortCharLi).appendTo('ul');

函数sortCharLi（a，b）{
var va=a.dataset.char.toString（）.charCodeAt（0），
vb=b.dataset.char.toString（）.charCodeAt（0）；
//如果是数字，就加上重量
如果（va<'a'.charCodeAt（0））va+=100；
如果（vb<'a'.charCodeAt（0））vb+=100；
返回vbli'）.sort（sortCharLi）.appendTo（'ul'）；

但是我需要删除jQuery依赖项，这样就不再是一个选项了

没有jQuery我怎么做

---

这是我从工作中得到的最好答案，但它可能需要根据您的html结构进行定制

不使用JQUERY对UL进行排序的函数：

function sortUnorderedList(ul, sortDescending) {
 if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

 // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

 // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

---

此功能保留您原来的分拣机方法。函数期望传递

ul

元素：

function sortThem(ul) {
    var nodes = Array.prototype.slice.call(ul.childNodes).filter(function(el) {
        // Could use QSA with scope depending on browser support here
        return el.tagName === 'LI';
    });

    nodes.sort(function(a, b) {
        var va = a.getAttribute('data-char').charCodeAt(0),
            vb = b.getAttribute('data-char').charCodeAt(0);

        // add weight if it's a number
        if (va < 'a'.charCodeAt(0)) va += 100;
        if (vb < 'a'.charCodeAt(0)) vb += 100;

        return vb < va ? 1 : -1;
    });

    nodes.forEach(function(node) {
        ul.appendChild(node);
    });
}

功能分类（ul）{
var nodes=Array.prototype.slice.call（ul.childNodes）.filter（函数（el）{
//可以使用QSA，范围取决于此处的浏览器支持
返回el.tagName==='LI'；
});
nodes.sort（函数（a，b）{
var va=a.getAttribute（'data-char'）.charCodeAt（0），
vb=b.getAttribute（'data-char'）。charCodeAt（0）；
//如果是数字，就加上重量
如果（va<'a'.charCodeAt（0））va+=100；
如果（vb<'a'.charCodeAt（0））vb+=100；
返回vb

您可以使用获取

ul

，可以使用属性从元素对象获取子元素

li

功能顺序（ul）{
//获取li的html子元素
//如果是ul，则儿童将为li
//`Array.from`地狱会帮你把它们转换成数组吗
var元素=数组.from（ul.children）；
//用相同的代码对它们进行排序
元素排序（函数（a，b）{
var va=a.getAttribute（'data-char'）.charCodeAt（0），
vb=b.getAttribute（'data-char'）。charCodeAt（0），
charCA='a'.charCodeAt（0）；
//如果是数字，就加上重量
如果（va


W

WWWWWWWWWWWWWW



5.

555555555555



A.

AAAAAAAAAAAAAA



1.

11111111


您可以使用
$（'ul>li'）
。请注意，正确的选择器应该是
$（'ul>li[data char]'）
，因为您只在具有data char属性的li标记中显示

要将querySelectorAll返回的节点列表转换为数组，可以使用

要替换附录，您可以使用

因此，代码可以是：


函数sortCharLi（a，b）{
var va=a.getAttribute（'data-char'）.charCodeAt（0），
vb=b.getAttribute（'data-char'）。charCodeAt（0）；
//如果是数字，就加上重量
如果（va<'a'.charCodeAt（0））va+=100；
如果（vb<'a'.charCodeAt（0））vb+=100；
返回vbli'）.sort（sortCharLi）.appendTo（'ul'）；
Array.from（document.querySelectorAll（'ul>li[data char]））.sort（sortCharLi）.forEach（函数（元素，索引）{
元素.parentNode.appendChild（元素）；
});
}


W

WWWWWWWWWWWWWW



5.

555555555555



A.

AAAAAAAAAAAAAA



1.

11111111


您的代码不会对元素进行排序。此外，它还会破坏现有的数据结构。
function sortThem(ul) {
    var nodes = Array.prototype.slice.call(ul.childNodes).filter(function(el) {
        // Could use QSA with scope depending on browser support here
        return el.tagName === 'LI';
    });

    nodes.sort(function(a, b) {
        var va = a.getAttribute('data-char').charCodeAt(0),
            vb = b.getAttribute('data-char').charCodeAt(0);

        // add weight if it's a number
        if (va < 'a'.charCodeAt(0)) va += 100;
        if (vb < 'a'.charCodeAt(0)) vb += 100;

        return vb < va ? 1 : -1;
    });

    nodes.forEach(function(node) {
        ul.appendChild(node);
    });
}