javascript - 如何根据列表项 ID 对 HTML 列表进行排序

Question

我确信这与另一个被问到的问题类似，但我找了整整一个小时，但找不到任何正确的东西。

我有一个无序列表，我希望列表项有一个索引，所以我只是将它们的 ID 设置为我想要的索引。所以它看起来像这样:

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

现在我有一个用作下拉框的 div，当您单击每个列表项时，它会更改页面的主题。我想要的是能够更改列表项的 id，然后对它们重新排序，以便所选的项现在成为第一项。因此，假设我单击了 item3，我理想的结果是看起来像这样的结果。

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

当然，我确信还有其他方法可以做到这一点，但我试图尽可能少地改变项目的框架，所以我认为这正是我想要的。每个项目的内容显然应该保持不变，但 id 会根据它在列表中的位置而变化。我希望这不是太晦涩，这似乎不应该太难，但我无法弄清楚，因为我是 JS/html 编码的新手。

Answer 1

Javascript解决方案:

<强> Demo

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