Order List Items by data value

Question

How can i set sort of li items by data valur or alternative methods?

<ul>
  <li id="two" data-value="3"> 1 </li>
  <li id="three" data-value="1"> 2 </li>
  <li id="one" data-value="2"> 3 </li>
</ul>

//Output must be 3 1 2 but i have more than 100 items

I think this is a simular question that can help you https://stackoverflow.com/questions/21600802/jquery-sort-list-based-on-data-attribute-value — Laura Landuyt, Aug 08 '18 at 12:07

score 1 · Answer 1 · answered Aug 08 '18 at 12:01

Use sorting logic on data value of li and update ul html.

$("#test").html(
  $("#test").children("li").sort(function (a, b) {
    var val1= parseInt($(a).data('value'));
    var val2= parseInt($(b).data('value'));
      return val1-val2;
  })
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test">
  <li id="two" data-value="3"> 1 </li>
  <li id="three" data-value="1"> 2 </li>
  <li id="one" data-value="2"> 3 </li>
</ul>

Order List Items by data value

1 Answers1