CODEWITHSUNDEEP
jquery
gene b.
gene b.

Reputation: 11994

Sort DOM Elements (Order) By Attribute

I have LI elements randomly placed inside a UL and I need to sort them by the data-order attribute value. That is, after the sort operation, the DOM order of the LI elements should correspond to their data-order value.

My question is, how do I apply this sorter to an empty / append sequence to delete and create DOM elements?

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>

Upvotes: 2

Views: 2920

Answers (2)

connexo
connexo

Reputation: 56753

Using flex box for your list and applying CSS order property is another viable solution here. I actually changed the code to go without 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>

Upvotes: 5

connexo
connexo

Reputation: 56753

You are sorting properly, yet you are not replacing the list items in the 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>

Upvotes: 5

Related Questions