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

时间：2019-11-13 15:26:03

标签： javascript jquery sorting

给出一个随机排序的列表，每个列表都有一个data-combi属性（用逗号分隔的数字列表），我想按正确的顺序对其进行排序

<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是字符串，因此排序结果在技术上是正确的（即，“ 10”在“ 9”之前排序，或者“ 16”在之前排序） “ 7”），而不是通缉犯：

var $combiUl = $('ul.result');
var $combiLi = $combiUl.children();

$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);
});
// deatch variants and re-append in correct order
$combiLi.detach().appendTo($combiUl);

在我的理想世界中，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>

如何实现这一目标？请考虑我可以使用更长或更短的逗号分隔字符串（即10,7,23,12或10,7），具体取决于用户选择“混合”哪些选​​项。无论如何，每行的逗号分隔字符串的长度是一致的，并且不会改变（它们始终包含N个逗号分隔的项目；我不能像10,7,23这样的一行，而像9,5这样的另一行8,2,24,6）

请问，有什么想法吗？这是显示正在发生什么的代码片段

var $combiUl = $('ul.result');
var $combiLi = $combiUl.children();

$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);
});
// deatch variants and re-append in correct order
$combiLi.detach().appendTo($combiUl);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p>the following "li" are sorted by "data-combi" attribute: since this is a string, the sort is technically right, but this is not what I am trying to achieve</p>
<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>

2 个答案:

答案 0 :(得分：0)

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

var $combiUl = $('ul.result');
var $combiLi = $combiUl.children(); 

$combiLi.sort(function(a,b){
  var an = a.getAttribute('data-combi').split(',').map(Number);
  var bn = b.getAttribute('data-combi').split(',').map(Number);
  var c1 = an[0] - bn[0]
  var c2 = an[1] - bn[1]
  var c3 = an[2] - bn[2]
  if (c1>0) return 1
  else if (c1<0) return -1
  else if (c2>0) return 1
  else if (c2<0) return -1
  else if (c3>0) return 1
  else if (c3<0) return -1
  else return 0
});
// deatch variants and re-append in correct order
$combiLi.detach().appendTo($combiUl);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p>the following "li" are sorted by "data-combi" attribute: since this is a string, the sort is technically right, but this is not what I am trying to achieve</p>
<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>

if / else可以用循环代替

var $combiUl = $('ul.result');
var $combiLi = $combiUl.children(); 

$combiLi.sort(function(a,b){
  var an = a.getAttribute('data-combi').split(',').map(Number);
  var bn = b.getAttribute('data-combi').split(',').map(Number);
  for (let x in an) {
    if (an[x] > bn[x]) return 1
    if (an[x] < bn[x]) return -1
  }
  return 0
});
// deatch variants and re-append in correct order
$combiLi.detach().appendTo($combiUl);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p>the following "li" are sorted by "data-combi" attribute: since this is a string, the sort is technically right, but this is not what I am trying to achieve</p>
<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>

答案 1 :(得分：-1)

更改以下几行：

$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;
});

您将能够无循环地完成它。

相关问题
最新问题