如何使用JavaScript確定有序列表中列表項的數量？

給定一個有序的HTML列表，給定列表元素，除了查看它在列表中的位置外，還有什麼方法可以確定它是JavaScript中的數字嗎？如何使用JavaScript確定有序列表中列表項的數量？

例如，假設我有一個列表

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

其呈現爲

iv. First 
v. Second

什麼是使用JavaScript（包括jQuery的）說，對李的給予，以最好的方式找出它的數字？

天真的方法是看項目的索引，添加起始值，並翻譯類型。但我想知道是否有更好的方法。

來源

2011-06-03 Rob

你可以使用一個循環設置一個指數 – Ibu 2011-06-03 06:28:44

看着http://www.w3.org/TR/html-markup/li.html我會說使用value成員。

注意：這是HTML5格式。在HTML4.01中，ol.start和li.value都被棄用。這意味着此解決方案可能僅在具有HTML5支持的瀏覽器上可靠運行。

來源

2011-06-03 06:35:33 CAFxX

一個例子是一個索引屬性添加到列表項：

可以說您的列表中有一個id =「有序」

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>

來源

2011-06-03 06:36:08 Ibu

爲<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。

來源

2011-06-03 06:36:34

value屬性在Firefox 4中返回undefined。 – Rob 2011-06-04 13:22:36

尼斯的問題:)

我會說，更好的數據注入到每個li元素，你可以把李裏面的一些HTML屬性，但是，我怕當你做HTML驗證，它將拒絕它。

所以這是代碼，

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

，當你渲染你的可愛的數量，這樣做：

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

來源

2011-06-03 07:57:22 kororo

這就是我已經使用的解決方案。這不是最優雅的，特別是當我動態插入/刪除/重新排序列表項。 – Rob 2011-06-04 13:24:03

如何使用JavaScript確定有序列表中列表項的數量？

回答

相關問題