Is there a way to get the content of an ordered list item's number?

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>

Is there a way to get the content of an ordered list item's number?

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>

That will produce a list of items like this.

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

Is there a way to get the III string of text of the #target list item?

EDIT:

Roman characters here are just an example. I'd like the ability to access to the content provided by any of the list-style-type options.

• javascript
• html
• dom

Share Improve this question Follow edited Nov 21, 2016 at 21:45 1252748 asked Nov 21, 2016 at 17:56 12527481252748 15.4k3434 gold badges117117 silver badges242242 bronze badges 6

• So do you want the strong "orange"? – mikestreety Commented Nov 21, 2016 at 17:59
• 1 @mikestreety: No, see the last sentence of the question: He/she wants the string "III". – T.J. Crowder Commented Nov 21, 2016 at 17:59
• 1 I'm mistaken on the understanding the question. Sorry, my fault – Marcos Pérez Gude Commented Nov 21, 2016 at 18:02
• 4 Probably related: stackoverflow./questions/2651739/… – Kuba Wyrostek Commented Nov 21, 2016 at 18:02
• prob dupe of stackoverflow./questions/13063095/… – Nina Scholz Commented Nov 21, 2016 at 21:52

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

The only way I can think of doing this is the following:

1) Get the index of the item (e.g. 3)

2) Have a function like this: https://stackoverflow./a/9083076/1324321

3) Run the index through the function

I created a jsfiddle here which can display the chosen selection to the user. Although javascript is not holding this as a string, I first find the index of the selected list item, then I recreate a list of that one item with the "start" attribute being set to that index.

Here is the HTML:

<ol>

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

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

And the JQuery:

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

JSFIDDLE

You could use the start attribute and iterate all list elements.

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>