Question

我有一些列表 - 它是按字母顺序生成的

<div class='list'>
  <ul>
    <li><a  href="/home/fresa/Desktop/task/page.html">2011</a></li>
    <li><a  href="/home/fresa/Desktop/task/page.html#?topic=2013">2012</a></li>
    <li><a  href="/home/fresa/Desktop/task/page.html#?topic=2012">2013</a></li>
    <li><a  href="/home/fresa/Desktop/task/page.html#?topic=2012">2014</a></li>
    </ul>
</div>

我试图从后到前扭转它：

var arr = [];
arr.push($('.list ul li'));
$('.list ul').html(arr.reverse());

但钢材显示的顺序不正确

如何修复它，以及我做错了什么

Answer 1

试试这个：

$('.list ul li').each(function(){
    $(this).prependTo($(this).parent())
});

它循环遍历每个项目并将其添加到列表的开头。在这里看一个小提琴：

http://jsfiddle.net/afsmonr1/

Answer 2

试试这个

var list = $(".list ul li").get().reverse();
$(".list ul").empty();
$.each(list, function(i) {
  $(".list ul").append("<li>" + list[i].innerHTML + "</li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class='list'>
  <ul>
    <li><a href="/home/fresa/Desktop/task/page.html">2011</a>
    </li>
    <li><a href="/home/fresa/Desktop/task/page.html#?topic=2013">2012</a>
    </li>
    <li><a href="/home/fresa/Desktop/task/page.html#?topic=2012">2013</a>
    </li>
    <li><a href="/home/fresa/Desktop/task/page.html#?topic=2012">2014</a>
    </li>
  </ul>
</div>

Answer 3

这是因为您的arr.push()无法按预期工作。它将一个jQuery对象推送到您的数组上，而不是您期望的4个单独元素。

如果您按如下方式设置数组，它将起作用：

＆＃13;

$(function() {
  var arr = $('.list ul li').get();
  $('.list ul').html(arr.reverse());
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='list'>
  <ul>
    <li><a  href="/home/fresa/Desktop/task/page.html">2011</a></li>
    <li><a  href="/home/fresa/Desktop/task/page.html#?topic=2013">2012</a></li>
    <li><a  href="/home/fresa/Desktop/task/page.html#?topic=2012">2013</a></li>
    <li><a  href="/home/fresa/Desktop/task/page.html#?topic=2012">2014</a></li>
  </ul>
</div>

＆＃13;

从后到前显示列表

3 个答案: