如何使用jQuery将具有特定类的有序列表项移动到列表顶部

Question

如何使用jQuery将具有特定类的有序列表项移动到列表顶部？

例如，在以下html代码中：

<div id="notice">click here</div>
<ul>
  <li>Coffee</li>
  <li>Juice</li>
  <li class="top">Tea</li>
  <li class="top">Milk</li>
  <li>Apple</li>
</ul>

当我单击“单击此处”时，我想将具有“ top”类的主题移到列表的顶部。

<div id="notice">click here</div>
<ul>
  <li class="top">Tea</li>
  <li class="top">Milk</li>
  <li>Coffee</li>
  <li>Juice</li>
  <li>Apple</li>
</ul>

（可选）当我再次单击“单击此处”时，如果将项目恢复到其原始位置，那将是很好的选择。

谢谢你的帮助。

Answer 1

根据评论，您可以使用prepend或prependTo 。

我会利用data来跟踪列表是否已排序，但是有无数其他方法可以做到（我敢肯定还会显示其他答案）。

这是一个快速而肮脏的小提琴 。 我已经取消了id ，因此您可以在一个页面上支持多个列表。

$('.notice').click(function(){
    var $ul = $(this).next('ul');
    if(!$ul.data('sorted')){
        $ul.data('original', $ul.html());
        $ul.data('sorted', true);
        $ul.prepend($ul.find('li.top'));
    } else {
        $ul.data('sorted', false);
        $ul.html($ul.data('original'));
    }
});

Answer 2

在这里，您是：懒惰的方式，前进的顶部，恢复html的反向。

 var oldHtml = $('ul').html(); var reversed = false; $('#notice').click(function() { if (!reversed) { $.each($('li.top').get().reverse(), function(index, value) { $(value).insertBefore($('li')[0]); }); reversed = true; return; } $('ul').html(oldHtml); reversed = false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="notice">click here</div> <ul> <li>Coffee</li> <li>Juice</li> <li class="top">Tea</li> <li class="top">Milk</li> <li>Apple</li> </ul> 

希望这可以帮助。