基于类别，使用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>

谢谢！

- wbdlc

Answer 1

你可以在它们所在的ul容器前添加.featured元素，以将它们移动到列表顶部。尝试这样做：

$('.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>

- Rory McCrossan

---

哇，这比我想象的要容易得多。谢谢你，Rory！ - wbdlc

jQuery通常是:D 很高兴能帮忙。 - Rory McCrossan

Answer 2

为了补充 @Rory McCrossan 的答案，我已经添加了使用导航按钮进行排序的功能。

$("ul.order-nav li").click(function() {
  // Find the Data attribute from unordered list [.order-nav]
  var sortClass = '.' + $(this).data('sort-by');
  // Prepent the [li] with matching class to top of [ul]
  $(sortClass).prependTo('.order-me');
});

这里是 Fiddle

- Kyzer

---

晚来的派对，但是很不错的补充，我喜欢它。干杯。 - wbdlc