Javascript 按逗号分隔的值对DOM元素排序

给定一个随机排序的列表，每个列表都有

数据组合

属性（一个逗号分隔的数字列表），我想按正确的顺序对它们进行排序

<ul class="result">  
  <li data-combi="10,16,24">Combination: 10,16,24</li>
  <li data-combi="8,7,23">Combination: 8,7,23</li>
  <li data-combi="9,16,23">Combination: 9,16,23</li>
  <li data-combi="8,7,24">Combination: 8,7,24</li>  
  <li data-combi="8,16,24">Combination: 8,16,24</li>
  <li data-combi="9,7,23">Combination: 9,7,23</li>
  <li data-combi="10,16,23">Combination: 10,16,23</li>
  <li data-combi="9,7,24">Combination: 9,7,24</li>  
  <li data-combi="9,16,24">Combination: 9,16,24</li>
  <li data-combi="8,16,23">Combination: 8,16,23</li>
  <li data-combi="10,7,23">Combination: 10,7,23</li>
  <li data-combi="10,7,24">Combination: 10,7,24</li>
</ul>

在我的理想世界中，

data-combi

属性中的每个逗号分隔的值都应该被视为数字，而不是字符串，从而得到以下正确的排序：

<ul class="expected">
  <li data-combi="8,7,23">Combination: 8,7,23</li>
  <li data-combi="8,7,24">Combination: 8,7,24</li>
  <li data-combi="8,16,23">Combination: 8,16,23</li>
  <li data-combi="8,16,24">Combination: 8,16,24</li>
  <li data-combi="9,7,23">Combination: 9,7,23</li>
  <li data-combi="9,7,24">Combination: 9,7,24</li>
  <li data-combi="9,16,23">Combination: 9,16,23</li>
  <li data-combi="9,16,24">Combination: 9,16,24</li>
  <li data-combi="10,7,23">Combination: 10,7,23</li>
  <li data-combi="10,7,24">Combination: 10,7,24</li>
  <li data-combi="10,16,23">Combination: 10,16,23</li>
  <li data-combi="10,16,24">Combination: 10,16,24</li>
</ul>

下面的“li”是按“datacombi”属性排序的：因为这是一个字符串，所以排序在技术上是正确的，但这不是我想要实现的


组合：10,16,24
组合：8,7,23
组合：9,16,23
组合：8,7,24
组合：8,16,24
组合：9,7,23
组合：10,16,23
组合：9,7,24
组合：9,16,24
组合：8,16,23
组合：10,7,23
组合：10,7,24

需要在逗号上拆分并转换为数字。if/else可以清理，但这是基本思想

var$combiUl=$（'ul.result'）；
var$combiLi=$combiUl.children（）；
$combiLi.sort（函数（a，b）{
var an=a.getAttribute（'data-combi'）.split（'，'）.map（Number）；
var bn=b.getAttribute（'data-combi'）.split（'，'）.map（编号）；
var c1=an[0]-bn[0]
var c2=an[1]-bn[1]
var c3=an[2]-bn[2]
如果（c1>0）返回1
否则，如果（c10）返回1
否则，如果（c20）返回1
否则，如果（c3更改以下行：

$combiLi.sort(function(a,b){
  var an = a.getAttribute('data-combi');
  var bn = b.getAttribute('data-combi');
  return (an > bn) ? 1 : ((an < bn) ? -1 : 0);
});

无需循环即可完成此操作。
将字符串转换为数字数组：
const a_arr=an.split（'，'）.map（n=>+n）；
循环遍历它并根据值进行排序。如果此列表是由其他数据收集创建的，则在创建列表之前对该数组进行排序将比在创建列表之后对DOM节点进行排序更容易。谢谢，这非常好而且简洁！我被困在循环中，我尝试了jQuery
$。each（an，function（x）{…}）
没有运气
['11,1,13'，'1,11,15'].sort（函数（a，b）{let an=a.split（“，”）.join（“”）；let bn=b.split（“，”）.join（“”）；console.log（an，bn）返回-bn；}）
$combiLi.sort(function(a,b){
  var an = a.getAttribute('data-combi');
  var bn = b.getAttribute('data-combi');
  return (an > bn) ? 1 : ((an < bn) ? -1 : 0);
});

$combiLi.sort(function (a, b) {
    let an = a.getAttribute('data-combi').split(",").join("");
    let bn = b.getAttribute('data-combi').split(",").join("");
    return an - bn;
});