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的东西，而不是重新排序它们以便所选择的那个现在是第一个项目。所以我们假设我点击了第3项，我理想的结果是看起来像是什么。

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

Answer 2

使用弹性框布局和order属性。您可以仅使用CSS来订购html元素。

这是一个简单的代码段：

ul.ordered {
  display: flex;
  flex-direction: column;
}

<h1>Without Flex</h1>
<ul>
    <li id="4"> item 4 </li>
    <li id="2"> item 2 </li>
    <li id="1"> item 1 </li>
    <li id="3"> item 3 </li>
</ul>

<h1>With Flex Order</h1>
<ul class="ordered">
    <li id="4" style="order: 4"> item 4 </li>
    <li id="2" style="order: 2"> item 2 </li>
    <li id="1" style="order: 1"> item 1 </li>
    <li id="3" style="order: 3"> item 3 </li>
</ul>

参考：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Answer 3

尝试这个逻辑......它可能有用......请检查Fiddle以获取演示..

        $('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;
            }
        });

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

3 个答案: