在jQuery中从最高到最低的每个元素中添加数据属性

2024-04-26 • 问答

我有这个代码

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

需要按最高到最低的值在每个元素中添加数据顺序属性，就像这样

<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” ，其余部分将以相同的方式添加。

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

这是您需要遵循的步骤

获取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,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>

在jQuery中从最高到最低的每个元素中添加数据属性

lwb896148823 回答：在jQuery中从最高到最低的每个元素中添加数据属性

大家都在问