Javascript цикл через атрибуты li и изменение значений на элемент

77
13

Я хочу пропустить кучу элементов <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. Стоит отметить, что я не ищу решение вернуться к тому, как список был раньше.


Спасибо.

спросил(а) 2021-01-19T22:02:24+03:00 2 месяца, 3 недели назад
1
Решение
97

Это должно работать (с jQuery 1.4):

$('.your_list li').text(function (index) {
return index + 1;
});

ответил(а) 2021-01-19T22:02:24+03:00 2 месяца, 3 недели назад
62

Я думаю, что вы предпочитаете переупорядочивать элементы списка, чем их содержимое. Таким образом, вы не потеряете ни одного из атрибутов 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); });

Примечание: непроверенные - возьмите идею.

ответил(а) 2021-01-19T22:02:24+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема