Question

我有这个HTML代码：

<ul id="mylist">
    <li data-title="a">A</li>
    <li data-title="x">X <a href="...">blah</a></li>
    <li data-title="b">3</li>
    <li data-title="f">moo</li>
    <li data-title="m">foo</li>
</ul>

如何使用<ul>按数据标题参数对此jQuery列表进行排序？我发现很多关于按照LI的内容对UL进行排序的问题，但是他们没有帮助。

Answer 1

您可以使用JavaScript原生函数 sort() 进行排序

// cache ul and li objects in variable
var $list = $('#mylist'),
  $li = $list.children('li');
// sorting list items using sort() based on data-title value
$li.sort(function(a, b) {
  // getting data-title attribute from dom object using getAttribute()
  var a1 = a.getAttribute('data-title'),
    b1 = b.getAttribute('data-title');
  //comparing values for sorting
  //return a1 > b1 || 0;
  //comparing values for sorting
  if (a1 > b1) {
    return 1;
  }
  if (a1 < > b1) {
    return -1;
  }
  return ||0;
});
// updating sorted order sorted order
$li.appendTo($list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="mylist">
  <li data-title="a">A</li>
  <li data-title="x">X <a href="...">blah</a>
  </li>
  <li data-title="b">3</li>
  <li data-title="f">moo</li>
  <li data-title="m">foo</li>
</ul>

如何按LI的数据标题参数对UL列表进行排序？

1 个答案: