Добавить атрибут данных в каждом элементе от самого высокого до самого низкого в jQuery

Question

У меня есть этот код

<ul>
    <li class="test" data-id="3">hi</li>
    <li class="test" data-id="5">hey</li>
    <li class="test" data-id="1">hello</li>
    <li class="test" data-id="17">Okay</li>
</ul>

Необходимо добавить атрибут data-order в каждом элементе от максимального к низшему значению, например

<ul>
    <li class="test" data-order="3" data-id="3">hi</li>
    <li class="test" data-order="2" data-id="5">hey</li>
    <li class="test" data-order="4" data-id="1">hello</li>
    <li class="test" data-order="1" data-id="17">Okay</li>
</ul>

тот, чье значение будет самым высоким, будет добавлен data-order = "1" , и остальное будет таким же образом.

Answer 1

Вот шаги, которые необходимо выполнить

• Получить все значения li
• Сортировать массив
• Теперь добавьте порядок к li

function sortNumber(a, b) {
  return b - a;
}

$(document).ready(function() {
  let allVal = [];
  $('ul li').each(function(i) {
    allVal.push(parseInt($(this).attr('data-id'), 10));
  });
  allVal = allVal.sort(sortNumber);

  $('ul li').each(function(i) {
    let id = parseInt($(this).attr('data-id'), 10);
    $(this).attr('data-order', allVal.indexOf(id) + 1);
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
  <li class="test" data-id="3">hi</li>
  <li class="test" data-id="5">hey</li>
  <li class="test" data-id="1">hello</li>
  <li class="test" data-id="17">Okay</li>
</ul>

function sortNumber(a, b) {
  return b - a;
}

$(document).ready(function() {
  let allVal = [];
  $('ul li').each(function(i) {
    allVal.push(parseInt($(this).attr('data-id'), 10));
  });
  allVal = allVal.sort(sortNumber);

  $('ul li').each(function(i) {
    let id = parseInt($(this).attr('data-id'), 10);
    let text = $(this).text();
    $(this).attr('data-order', allVal.indexOf(id) + 1).text(text + ' Order =' + (allVal.indexOf(id) + 1) );
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
  <li class="test" data-id="3">hi</li>
  <li class="test" data-id="5">hey</li>
  <li class="test" data-id="1">hello</li>
  <li class="test" data-id="17">Okay</li>
</ul>

Answer 2

Следующий фрагмент демонстрирует один вариант. Изменение text только для демонстрации.

$(() => {
  $('li')
    .toArray()
    .sort((a,b) => $(b).data('id') - $(a).data('id'))
    .map((e,i) => $(e).data('order', i+1).text(i+1))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
    <li class="test" data-id="3">hi</li>
    <li class="test" data-id="5">hey</li>
    <li class="test" data-id="1">hello</li>
    <li class="test" data-id="17">Okay</li>
</ul>