javascript - 如何根据每个 LI.span 中的数字对列表进行排序？

Question

我正在尝试根据每个 LI 中范围内的数字对 LI 列表进行排序。我看过可以执行此操作的插件，但这不是我想要的。

谁能告诉我如何按照我上面所说的那样对简单列表进行排序？我真的不知道从哪里开始，我不知道它是复杂的还是简单的。

这是我的代码:

ul {
  width: 200px;
  background-color: #252525;
  padding: 10px;
}

li {
  background-color: #353535;
  margin: 10px;
  padding: 5px;
  color: #fff;
}

li span {
  float: right;
}

<ul>

  <li> Cups
    <span>12</span>
  </li>

  <li> Plates
    <span>18</span>
  </li>

  <li> Forks
    <span>03</span>
  </li>

  <li> Knives
    <span>06</span>
  </li>

  <li> Bowls
    <span>08</span>
  </li>

</ul>

Answer 1

这是你应该使用的:

function sortEm(a, b) {
  return parseInt($('span', a).text()) < parseInt($('span', b).text()) ? 1 : -1;
}

$('li').sort(sortEm).prependTo($('ul#test'));

ul {
  width: 200px;
  background-color: #252525;
  padding: 10px;
}

li {
  background-color: #353535;
  margin: 10px;
  padding: 5px;
  color: #fff;
}

li span {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="test">

  <li> Cups
    <span>12</span>
  </li>

  <li> Plates
    <span>18</span>
  </li>

  <li> Forks
    <span>03</span>
  </li>

  <li> Knives
    <span>06</span>
  </li>

  <li> Bowls
    <span>08</span>
  </li>

</ul>