Question

我有一个带有li元素的（jquery ui）可排序列表，它在value-attribute中保存信息（进一步处理的id）。

但是，我希望我的列表显示旁边的编号，类似于这个小提琴：http://jsfiddle.net/knj92mvu/

（当然我的意思是#correctList的编号，确保......）

$("#myOL").sortable({
update: function (event, ui) {
    console.log('new index of dropped item:' + ui.item.index());
                }
});

现在，OL元素通过从li的value-property获取位置编号来认为它们很聪明。但是，如上所述，价值属性对我来说很重要，我不能覆盖它。

有没有办法可以显示正确的项目编号（上面给出的示例链接为1,2,3）忽略value-property？

我可以想象一个可能的解决方法：使用.sortable（）的一个事件，获取项目的索引并将其写入li的innerText。

但是我想确保没有“干净”的解决方法，我可以将某些编号分配给列表，忽略value-property。基本上也是为了获取信息我如何解决这个问题而不用jquery ui。

Answer 1

您可以使用CSS Counters

<强> CSS：

#myOL{
    list-style-position: inside;
    list-style-type: none;
}

#myOL ol{
    counter-reset: list 1;
}

#myOL li:before {
    content: counter(list) '. ';
}

#myOL li{
    padding: 4px;
    border: 1px solid #ccc;
    counter-increment: list 1;
}

JSFiddle demo

Answer 2

您可以使用<div>代替<li> s完全绕过计数逻辑：

<ol>
<div style="display:list-item;" value="whatever">Text</div>
<ol>

您的小提琴已更新：http://jsfiddle.net/mbw41oj5/

<ol>项目的编号不使用<li> value属性</li> </ol>

2 个答案: