javascript - 根据数字 Id 对 li 标签进行排序

Question

我看过其他排序示例。但我无法将它们应用到我的网站。

我的代码是这样的。

<ul class="selectable" id="third">
<li id="0">John</li>
<li id="0">Tom</li>
<li id="30.00">Petar</li>
<li id="100">Johnson</li>
<li id="33.00">Jackson</li>
<li id="0">Jack</li>
<li id="10.0">Allen</li>
</ul>

我如何根据他们的 li id 标签对它们进行排序？

修改:如果我输入标题而不是 id，我如何根据标题对它们进行排序？

Answer 1

id 应该是唯一的，所以使用自定义 data-* 属性。您可以使用原生 javascript sort() 进行排序。

$('.selectable li').sort(function(a, b) {
// get list items
  return $(a).data('id') - $(b).data('id');
  // compare values
}).appendTo('.selectable');
// update sorted dom elements

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="selectable" id="third">
  <li data-id="0">John</li>
  <li data-id="0">Tom</li>
  <li data-id="30.00">Petar</li>
  <li data-id="100">Johnson</li>
  <li data-id="33.00">Jackson</li>
  <li data-id="0">Jack</li>
  <li data-id="10.0">Allen</li>
</ul>