javascript - 在 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

以下代码片段演示了一个选项。更改 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>