список дисплей от задней к передней

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 отдельных элемента, которые вы ожидаете.

Если установить массив следующим образом он будет работать:

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

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