Order parent by number that exists in the child item using Jquery

Question

If I have ul li with a number inside the li, how can I order all the ul by this number (the Higher should be first)?

For example I have that html that I can't change

<ul id="ul-list">
    <li>
        <div class="name">product 1</div>
        <div class="rating">85</div>
    </li>
    <li>
        <div class="name">product 2</div>
        <div class="rating">20</div>
   </li>
    <li>

        <div class="name">product 3</div>
        <div class="rating">95</div>
    </li>
</ul>

I want re-order that list so product 3 will be the first one because that item has the highest rating, and product 2 will be the last one because that product has the lowest rating

Answer 1

You can convert toArray, sort that array, empty the container and finally add the sorted array of elements.

var sorted = $('#ul-list li').toArray().sort(function(a, b) {
  var aValue = $(a).find('.rating')[0].textContent;
  var bValue = $(b).find('.rating')[0].textContent;

  return bValue - aValue;
});


$('#ul-list').empty().append(sorted);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul-list">
    <li>
        <div class="name">product 1</div>
        <div class="rating">85</div>
    </li>
    <li>
    <div class="name">product 2</div>
        <div class="rating">20</div>
    </li>
        
    <li>
      <div class="name">product 3</div>
        <div class="rating">95</div>
    </li>
        
</ul>

Answer 2

You may want to consider adding a data attribute that stores the value using jQuery. You can then create a function in JavaScript that:

1) grabs this stored number with jQuery,

2) adds it to an array,

3) sort the array with a method, and

4) use jQuery to post the results in the order you want.

If you wanted to store data in the HTML you can do so like this:

$("your selector").attr("data-value", your value);