Вопрос:

Сортировать элементы DOM (порядок) по атрибуту

jquery

1072 просмотра

2 ответа

2256 Репутация автора

У меня есть элементы LI, случайно расположенные внутри UL, и мне нужно отсортировать их по data-orderзначению атрибута. То есть после операции сортировки порядок DOM элементов LI должен соответствовать их data-orderзначению.

У меня вопрос: как применить этот сортировщик к empty / appendпоследовательности, чтобы удалить и создать элементы DOM?

function sortEventsByOrder(a,b) {

	var startA = parseInt($(a).attr('data-order'));
	var startB = parseInt($(b).attr('data-order'));	
	return startA - startB;
}

$('#eventList li').sort(sortEventsByOrder);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="eventList">
   <li data-order="5">Element 5</li>
   <li data-order="3">Element 3</li>
   <li data-order="6">Element 6</li>
   <li data-order="1">Element 1</li>
   <li data-order="2">Element 2</li>
   <li data-order="4">Element 4</li>
</ul>

Автор: gene b. Источник Размещён: 07.01.2018 01:27

Ответы (2)


3 плюса

25952 Репутация автора

Решение

Вы правильно сортируете, но не заменяете элементы списка в DOM.

function sortEventsByOrder(a,b) {
	const startA = parseInt($(a).data('order'));
	const startB = parseInt($(b).data('order'));	
	return startA - startB;
}

$('#eventList').html($('#eventList li').sort(sortEventsByOrder))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="eventList">
   <li data-order="5">Element 5</li>
   <li data-order="3">Element 3</li>
   <li data-order="6">Element 6</li>
   <li data-order="1">Element 1</li>
   <li data-order="2">Element 2</li>
   <li data-order="4">Element 4</li>
</ul>

Автор: connexo Размещён: 07.01.2018 01:33

1 плюс

25952 Репутация автора

Использование flex box для вашего списка и применение orderсвойства CSS - еще одно жизнеспособное решение. Я на самом деле изменил код без jQuery:

[...document.querySelectorAll('#eventList li')].forEach((listItem) => {
  listItem.style.order = listItem.dataset.order;
});
#eventList {
  display: flex;
  flex-direction: column;
}
<ul id="eventList">
  <li data-order="5">Element 5</li>
  <li data-order="3">Element 3</li>
  <li data-order="6">Element 6</li>
  <li data-order="1">Element 1</li>
  <li data-order="2">Element 2</li>
  <li data-order="4">Element 4</li>
</ul>

Автор: connexo Размещён: 07.01.2018 01:49
Вопросы из категории :
32x32