Question

我想根据li对data-order个元素进行排序，但它没有正确排序。

    <ul>
<li>Ten ** having 0<input type="checkbox" name="siz" data-order='0'/></li>
<li>Ten<input type="checkbox" name="siz" data-order='0'/></li>
<li>One <input type="checkbox" data-order='-1' name="One" value="1"/></li>
<li>Two <input type="checkbox" data-order='-2' name="twp"/></li>
<li>threee<input type="checkbox" name="thre" data-order='3'/></li>
<li>Four<input type="checkbox" name="for" data-order='4'/></li>
<li>Five<input type="checkbox" data-order='5' name="fibe"/></li>
<li>Six<input type="checkbox" name="siz" data-order='6'/></li>
<li>Seven<input type="checkbox" name="siz" data-order='7'/></li>
<li>Eight<input type="checkbox" name="siz" data-order='8'/></li>
<li>Nine<input type="checkbox" name="siz" data-order='9'/></li>
<li>Ten ** having 0<input type="checkbox" name="siz" data-order='0'/></li>

</ul>

var elems = $('ul li');
elems.sort(function(a, b) {
  return $(a).find('input').attr('data-order') < $(b).find('input').attr('data-order')
}).appendTo(elems.parent());

我缺少对元素列表进行排序的内容？请看这里的小提琴：https://jsfiddle.net/6d92gy9y/

Answer 1

降序：

var elems = $('ul li');

elems.sort(function(a, b) {
    if ($(a).find('input').attr('data-order') < $(b).find('input').attr('data-order'))
    return -1;
    if ($(a).find('input').attr('data-order') > $(b).find('input').attr('data-order'))
    return 1;
    return 0;

}).appendTo(elems.parent());

Answer 2

您的代码存在的问题是您正在比较字符串。如果您使用data()来获取值，那么jQuery会将它们转换为正确的类型，在这种情况下为number。试试这个：

＆＃13;

var $elems = $('ul li')
$elems.sort(function(a, b) {
  return $(a).find('input').data('order') > $(b).find('input').data('order');
}).appendTo($elems.closest('ul'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>One <input type="checkbox" data-order="-1" name="One" value="1" /></li>
  <li>Two <input type="checkbox" data-order="-2" name="twp" /></li>
  <li>threee <input type="checkbox" data-order="3" name="thre" /></li>
  <li>for <input type="checkbox" data-order="4" name="for" /></li>
  <li>fibe <input type="checkbox" data-order="5" name="fibe" /></li>
  <li>siz <input type="checkbox" data-order="6" name="siz" /></li>
  <li>svn <input type="checkbox" data-order="7" name="siz" /></li>
  <li>eit <input type="checkbox" data-order="8" name="siz" /></li>
  <li>nin <input type="checkbox" data-order="9" name="siz" /></li>
  <li>tn <input type="checkbox" data-order="0" name="siz" /></li>
</ul>

＆＃13;

列表元素未正确排序

2 个答案: