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>

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');
});

Here is the Fiddle

jQuery根据类重新排序列表项

2 个答案: