1

Given an orderered list

<ol>
    <li id="item">ipsum</li>
    <li id="other">lorem</li>
<ol>
<span>The item <cite src="other?"></cite> is an item.</span>

Is it possible to reference the listed items by their ordinal value? e.g. if I write <cite src="other"><cite>, it would appear as Item (2)? I cannot know it's position in the list beforehand, so it would need to be done automatically in some way; is this possible in css?

Expected output:

  1. ipsum
  2. lorem

The item 2. is an item.

Essentially the <cite src="other"><cite> should copy the content of the ordinal value.

If such solution cannot be attained with the current limitations of CSS, a JavaScript solution would suffice.

wscourge
  • 10,657
  • 14
  • 59
  • 80
Frank Vel
  • 1,202
  • 1
  • 13
  • 27
  • Would `:nth-of-type` do? – wscourge Feb 25 '17 at 10:25
  • @wscourge So if I wrote `other:nth-of-type`, would that appear as, in my example, `2`? – Frank Vel Feb 25 '17 at 10:43
  • 1
    I think javascript is the way to go – neophyte Feb 25 '17 at 10:45
  • Well, `nth-of-type` is not the way to go. Sorry for confusing you. What is your expected result? What exactly do you want to see between `` tags after page is rendered? And what, if any, functionality do you want it to have? – wscourge Feb 25 '17 at 11:11
  • @wscourge I added expected render; essentially it should copy the content of the list's counter value. – Frank Vel Feb 25 '17 at 11:20
  • I found this from '09, but I would have expected this to have changed in 8 years: http://stackoverflow.com/questions/532073/how-can-i-read-the-applied-css-counter-value – Frank Vel Feb 25 '17 at 11:25
  • Are you interested in javascript solution for it? Because I don't think there's any using CSS, while js is quite simple. – wscourge Feb 25 '17 at 11:34
  • @wscourge Given the lack of a css solution, I don't that I have any other choice... I think I'll rephrase the question to allow for a js solution. – Frank Vel Feb 25 '17 at 11:37

1 Answers1

2

For every <cite> tag, loop through <ol> children, and if you find one with and id attribute matching <cite>'s src attribute, set it's position (+1) as <cite>'s innerText :

var cites     = document.getElementsByTagName("cite");
var listItems = document.getElementById("my-items").children;

for(var i = 0; i < cites.length; i++) {
    var cite = cites[i];
    var src = cite.getAttribute("src");

    for (var j = 0; j < listItems.length; j++) {
        var id = listItems[j].getAttribute("id");
        if(id === src) {
             cite.innerText = j + 1;
             break;
        }
    }
}
<ol id="my-items">
    <li id="item">ipsum</li>
    <li id="other">lorem</li>
<ol>
<span>The item <cite src="other"></cite> is an item.</span>

EDIT: More efficient solution:

var listItems = document.getElementById("my-items").children;

for(var i = 0; i < listItems.length; i++ ) {
  var id = listItems[i].getAttribute("id");
  var cite = document.querySelector("[src='" + id + "']");
  if(cite) cite.innerText = i + 1;
}
<ol id="my-items">
    <li id="item">ipsum</li>
    <li id="other">lorem</li>
<ol>
<span>The item <cite src="other"></cite> is an item.</span>
wscourge
  • 10,657
  • 14
  • 59
  • 80
  • While this is a sufficient solution, wouldn't it be more effective to use javascript to list the items (instead of li's value) and attach its position value to a data-attribute? This value could be read directly. Its runtime should be O(#cites+#listitems) instead of O(#cites*#listitems). – Frank Vel Feb 25 '17 at 12:05
  • See my edit. It will work assuming uniqueness of `src` attributes. – wscourge Feb 25 '17 at 12:13