jQuery根据类重新排序列表项

Question

有没有一种简单的方法可以使用类重新排序列表项？

我想指定一个类来首先在列表顶部显示这些项目,下面列出了其他列表项.

<ul class="order-me">
    <li class="">normal content</li>
    <li class="">normal content</li>
    <li class="featured">featured content</li>
    <li class="">normal content</li>
    <li class="featured">featured content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
</ul>

期望的输出:

<ul class="order-me">
    <li class="featured">featured content</li>
    <li class="featured">featured content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
</ul>

谢谢!

Answer 1

您可以将.featured元素添加到其包含内容,ul以将它们移动到列表顶部.试试这个:

$('.featured').prependTo('.order-me');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="order-me">
  <li class="">normal content</li>
  <li class="">normal content</li>
  <li class="featured">featured content</li>
  <li class="">normal content</li>
  <li class="featured">featured content</li>
  <li class="">normal content</li>
  <li class="">normal content</li>
</ul>