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>

当我点击“点击此处”时，我想将li itmes与“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来跟踪列表是否已排序，但还有无数其他方法（因为我确定其他答案会显示）

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

Answer 2

你在这里：懒惰的方式，提前移动，恢复html反向。

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望这有帮助。

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

2 个答案: