Javascript цикл через атрибуты li и изменение значений на элемент
Я хочу пропустить кучу элементов <li> и обновить значение, содержащееся в нем, и показать это в документе.
Причина, по которой я делаю это, - это то, что я хочу отсортировать список элементов в заказе. Я делаю это с помощью Sortable в JQuery.
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
порядок может стать:
<li> 3 </li>
<li> 1 </li>
<li> 4 </li>
<li> 2 </li>
<li> 5 </li>
Затем, нажав кнопку, мне бы хотелось, чтобы моя функция JS изменила значение элементов li на 1,2,3,4,5. Стоит отметить, что я не ищу решение вернуться к тому, как список был раньше.
Спасибо.
Это должно работать (с jQuery 1.4):
$('.your_list li').text(function (index) {
return index + 1;
});
Я думаю, что вы предпочитаете переупорядочивать элементы списка, чем их содержимое. Таким образом, вы не потеряете ни одного из атрибутов li/classes/... И вы можете сохранить элементы DOM неповрежденными, только изменить порядок некоторых детей ul.
Я нашел хороший небольшой фрагмент, сделав это:
http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
Единственное, что вам еще нужно сделать, это запомнить начальный порядок
function mysortA( a, b ) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
}
function mysortB( a, b ) {
return a.originalindex < b.originalindex ? -1
: a.originalindex > b.originalindex ? 1
: 0;
}
Вы должны инициализировать:
var ul = $('ul');
var listitems = ul.children('li').get();
// remember original index
listitems.each( function(index, li){ li.originalindex=index; } );
Затем вы можете выбрать один из способов:
// sort them using your sort function
listitems.sort( mysort )
// rebuild the list container
listitems.each( function(idx, itm) { mylist.append(itm); });
И отбросьте назад:
var ul=$('ul');
ul.children('li').get().sort(mysortB).each(function(i,li){ ul.append(li); });
Примечание: непроверенные - возьмите идею.
