獲取有序列表項的計算數量

Question

有沒有辦法獲取有序列表項的數字的內容？

 var list = document.getElementById('list'); list.style.listStyleType = 'upper-roman'; 

 <ol class="list" id="list"> <li class="list__item">apple</li> <li class="list__item">banana</li> <li class="list__item" id="target">orange</li> <li class="list__item">pear</li> </ol> 

這將產生這樣的項目列表。

I. apple
II. banana
III. orange
IV. pear

有沒有辦法獲得#target列表項的III字符串？

編輯：

這里的羅馬字符只是一個例子。 我希望能夠訪問任何list-style-type選項提供的內容。

Answer 1

我能想到這樣做的唯一方法如下：

1）獲取項目的索引（例如3）

2）有這樣的功能： https ： //stackoverflow.com/a/9083076/1324321

3）通過該函數運行索引

Answer 2

我在這里創建了一個jsfiddle ，它可以向用戶顯示所選的選擇。 雖然javascript沒有將其保存為字符串，但我首先找到所選列表項的索引，然后重新創建該項的列表，並將“start”屬性設置為該索引。

這是HTML：

<ol>

  <li>first</li>
  <li>second</li>
  <li id="active">third</li>
  <li>Fourth</li>
</ol>

<br/>
<br/>
<div id='selected'>
</div>

和JQuery：

$(document).ready(function() {
  var intt = $('li').index($('#active')) + 1;
  $('#selected').html('<ol start="' + intt + '"><li></li></ol>');
});

的jsfiddle

Answer 3

您可以使用start屬性並迭代所有列表元素。

 var list = document.getElementById('list'), start = list.start || 0; list.style.listStyleType = 'upper-roman'; Array.prototype.forEach.call(list.getElementsByTagName('li'), function (a, i) { if (a.id === 'target') { console.log(i + start); console.log(a.innerHTML); } }); 

 <ol class="list" id="list" start="5"> <li class="list__item">apple</li> <li class="list__item" >banana</li> <li class="list__item" id="target">orange</li> <li class="list__item">pear</li> </ol>