Javascript 如何根据列表项id在HTML中排序列表

我确信这与另一个被问到的问题相似，但我找了整整一个小时，没有找到任何完全正确的答案

我有一个未排序的列表，我希望列表项有一个索引，所以我只是让它们的ID成为我想要的索引。所以它看起来像：

<ul>
    <li id="1"> item1 </li>
    <li id="2"> item2 </li>
    <li id="3"> item3 </li>
    <li id="4"> item4 </li>
</ul>

第1项
第2项
第3项
第4项

现在我有一个div作为下拉框，当您单击每个列表项时，它会更改页面的主题。我想要的是，能够更改列表项的id，然后对它们重新排序，使选定的项现在成为第一项。让我们假设我点击了第3项，理想情况下我希望得到的结果是这样的

<ul>
    <li id="1"> item3 </li>
    <li id="2"> item1 </li>
    <li id="3"> item2 </li>
    <li id="4"> item4 </li>
</ul>

第3项
第1项
第2项
第4项

当然，我肯定还有其他方法可以做到这一点，但我正试图尽可能少地改变项目的框架，所以我认为这正是我理想中想要的。每个项目的内容显然应该保持不变，但id将根据其在列表中的位置而改变。我希望这不是太模糊，它看起来不太难，但我无法理解，因为我不熟悉JS/html编码。

Javascript解决方案：

var ul = document.getElementById("list");
var list = ul.children;

for(var i=0; i<list.length; i++){
    list[i].onclick = function(){
        if(i > 0){
            ul.removeChild(this);
            ul.insertBefore(this, list[0]);

            for(var j=0; j<list.length; j++){
                list[j].id = j+1;   
            }
        }
    };
}

var ul=document.getElementById（“列表”）；
var list=ul.children；
对于（变量i=0；i 0）{
ul.removeChild（本）；
ul.insertBefore（本，列表[0]）；
对于（var j=0；j尝试此逻辑…它可能会工作…请检查此演示

        $('li').on({
            click: function (e) {
                var all = $("#rootUl").children("li");
                var index = all.index($(e.target));
                var current = e.target.innerHTML;

                if (index > 0) {
                    for (var i = index - 1; i >= 0; i--) {
                        all[i + 1].innerHTML = all[i].innerHTML;
                    }
                }
                all[0].innerHTML = current;
            }
        });

使用flex-box布局和
order
属性。您可以仅使用CSS对html元素进行排序

下面是一个简单的片段：


ul.ordered{
显示器：flex；
弯曲方向：立柱；
}
不带Flex

第4项
第2项
第1项
第3项

灵活订货

第4项
第2项
第1项
第3项
只需使用值而不是id。。。