获取计算的有序列表项数

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) 获取item的索引（例如3）

2) 有这样的功能：https://stackoverflow.com/a/9083076/1324321

3) 通过函数运行索引

Answer 2

我创建了一个jsfiddle here，它可以向用户显示选择的选项。尽管 javascript 没有将此作为字符串保存，但我首先找到所选列表项的索引，然后我重新创建该项目的列表，并将“开始”属性设置为该索引。

这里是 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>