11

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.

1252748
  • 14,597
  • 32
  • 109
  • 229

3 Answers3

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.com/a/9083076/1324321

3) Run the index through the function

Community
  • 1
  • 1
mikestreety
  • 833
  • 6
  • 28
  • 1
    yes, this would work for the roman numerals example, however i was more interested in something that would allow me to access the content in any of options provided by the api. – 1252748 Nov 21 '16 at 18:11
  • I've updated the question with that clarification, thanks. – 1252748 Nov 21 '16 at 18:14
2

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

Jacob Morris
  • 490
  • 1
  • 6
  • 16
  • 1
    This does a good job of extracting the value and putting it somewhere else, but it does not get the value as a string so that anything can be done with it further. Thanks. – 1252748 Nov 21 '16 at 19:08
1

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>
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
  • This doesn't answer the question really. Thanks though! – 1252748 Nov 21 '16 at 19:10
  • 1
    I've updated the question to highlight the string I'm ultimately attempting to access. Please see the bolder text: it is neither the `start` + `index` value, nor the fruit name, but rather the `III`. – 1252748 Nov 21 '16 at 21:47