根据数字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>