Question

给定一个有序的HTML列表，除了查看列表中的位置外，在给定列表元素的情况下，有没有办法确定它在JavaScript中的数量？

例如，假设我有一个列表

<ol start="4" type="i">
 <li>First</li>
 <li>Second</li>
</ol>

呈现为

iv. First
 v. Second

使用JavaScript（包括jQuery）的最佳方式是什么，在LI的基础上，找出它的数字？

天真的方法是查看项目的索引，添加起始值并翻译类型。但我想知道是否有更好的方法。

Answer 1

一个示例是向列表项添加索引属性：

假设您的列表中有id ='ordered'

var ol = document.getElementById('ordered');

// select the list items
var lists = ol.getElementsByTagName('li');

// now loop through the items and set a custom property 'index'
var l = lists.length; // total items

for (var i=1;i<=l;i++){
  list[i].index = i;
}

现在你的列表项将有一个索引属性，你可以通过javascript访问它来确定它的位置。

<ol id='ordered'>
 <li index='1'>First</li>
 <li index='2'>Second</li>
</ol>

Answer 2

关注http://www.w3.org/TR/html-markup/li.html我要说使用value成员。

注意：这是在HTML5中。在HTML4.01中，ol.start和li.value都已弃用。这意味着此解决方案可能仅在具有HTML5支持的浏览器上可靠地工作。

Answer 3

<li>元素的MDC documentation提到value属性，应该这样做。它已在HTML 4中弃用，但已在HTML 5中重新引入。如果您的浏览器支持它，您应该能够写：

$("li").prop("value");  // jQuery 1.6 and higher
$("li").attr("value");  // jQuery 1.5 and lower

然而，我无法在Firefox 3.6中使用该属性（它始终返回-1）。如果您想测试浏览器对该功能的支持，我创建了fiddle。

Answer 4

好问题：）

我想说，最好将数据注入每个li元素，你可以在li中放入一些HTML属性，但我担心当你进行HTML验证时，它会拒绝它。

所以这是代码，

var lis = $("ol li").each(function(i, el)
{
    $(this).data("index", i);
});

当你渲染可爱的数字时，请执行以下操作：

$(this).data("index");

：）

如何使用JavaScript确定有序列表中的列表项的编号？

4 个答案: