javascript - 如何使用 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”的 li 项目移动到列表的顶部。

<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跟踪列表是否已排序，但还有无数其他方法可以做到这一点(我相信其他答案会显示)。

Here's a quick and dirty fiddle .我已经取消了 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'));
    }
});