Ось такі варіанти для цього:
По-перше : без 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;
});
... та з jQuery:
Ви можете скористатися цим:
$($("ul > li").get().reverse()).each(function (i) {
$(this).text( 'Item ' + (++i));
});
Демо тут
Ще один спосіб, використовуючи також jQuery з реверсом :
$.fn.reverse = [].reverse;
$("ul > li").reverse().each(function (i) {
$(this).text( 'Item ' + (++i));
});
Це демо тут .
Ще однією альтернативою є використання length
(кількість елементів, що відповідають цьому селектору) та спуск звідти, використовуючи index
кожну ітерацію. Тоді ви можете скористатися цим:
var $li = $("ul > li");
$li.each(function (i) {
$(this).text( 'Item ' + ($li.length - i));
});
Це демо тут
Ще один , пов'язаний із вищезгаданим:
var $li = $("ul > li");
$li.text(function (i) {
return 'Item ' + ($li.length - i);
});
Демо тут
<li>Item 5</li>
на індекс 0.