Aqui estão opções diferentes para isso:
Primeiro : sem jQuery:
var lis = document.querySelectorAll('ul > li');
var contents = [].map.call(lis, function (li) {
return li.innerHTML;
}).reverse().forEach(function (content, i) {
lis[i].innerHTML = content;
});
Demonstração aqui
... e com jQuery:
Você pode usar isto:
$($("ul > li").get().reverse()).each(function (i) {
$(this).text( 'Item ' + (++i));
});
Demonstração aqui
Outra maneira, usando também o jQuery com reverse é:
$.fn.reverse = [].reverse;
$("ul > li").reverse().each(function (i) {
$(this).text( 'Item ' + (++i));
});
Esta demonstração aqui .
Mais uma alternativa é usar o length
(número de elementos correspondentes a esse seletor) e descer a partir daí usando index
cada iteração. Então você pode usar isso:
var $li = $("ul > li");
$li.each(function (i) {
$(this).text( 'Item ' + ($li.length - i));
});
Esta demonstração aqui
Mais um , meio que relacionado ao anterior:
var $li = $("ul > li");
$li.text(function (i) {
return 'Item ' + ($li.length - i);
});
Demonstração aqui
<li>Item 5</li>
ter um índice de 0. #