是否可以基于javascript中的一组自定义值来排序列表？

Question

    <ul id="theIndexContainer">
        <li id="listItem" popVal="2"></li>

        <li id="listItem" popVal="0"></li>

        <li id="listItem" popVal="1"></li>

        <li id="listItem" popVal="4"></li>

        <li id="listItem" popVal="3"></li>
    </ul>

例如在网站上按popVal的顺序更改此列表的顺序？如果是这样，那怎么办？

Answer 1

这里。

const sortLI = (a, b) => a.dataset.popval-b.dataset.popval;

document.addEventListener('DOMContentLoaded', function() {
  let sorted = Array.from(document.querySelectorAll('#theIndexContainer li')).sort(sortLI);
  let ulList = document.querySelector('#theIndexContainer');
  ulList.innerHTML = '';
  
  sorted.forEach(i => {
    console.log(i);
    ulList.appendChild(i);
  });  
  
  
});

    <ul id="theIndexContainer">
        <li id="listItem" data-popval="2">2</li>

        <li id="listItem" data-popval="0">0</li>

        <li id="listItem" data-popval="1">1</li>

        <li id="listItem" data-popval="4">4</li>

        <li id="listItem" data-popval="3">3</li>
    </ul>