CODEWITHSUNDEEP
javascripthtmlcsshtml-lists
Paul Pehrson
Paul Pehrson

Reputation: 138

How do you refer to a specific item number in a numbered list?

I'm a technical writer, and the software I use to do our documentation is based on HTML. All our topics are created as HTML and styled with CSS.

In the documentation, I'm explaining how to perform a task. You need to create a widget in step 3, and then in step 10, you need to use the widget you created in step 3 to do something else.

I'd like to be able to programmatically refer back to the step number (step 3) when it comes up in step 10. I don't want to put in "step 3" in plain text, because if somebody adds a new step above it, the plain text reference will break. Instead, I want to get the position of the list item, and then display that position number in step 10.

Here is a simplified HTML example:

<ol>
<li>This is step 1</li>
<li>This is step 2</li>
<li name="stepreference">This is step 3. Create the widget.</li>
<li>This is step 4</li>
<li>This is step 5</li>
<li>This is step 6</li>
<li>This is step 7</li>
<li>This is step 8</li>
<li>This is step 9</li>
<li>Take the widget that you created in step 3 and do x.</li>
</ol>

Instead of "step 3" in the last section, I want something like:

<li> Take the widget that you created in step <variable> and do x.</li>

Is there any way to do this? Is there maybe a jQuery or other JavaScript solution? Do I need to so some sort of CSS numbering so the CSS knows what position the list is?

Upvotes: 0

Views: 727

Answers (1)

Temani Afif
Temani Afif

Reputation: 273740

With CSS this is clearly not possible, but here is an idea with jQuery where you can rely on data-attribute and some empty span where you dynamically add the needed content:

$('[data-step]').each(function() {
  var s = $(this).data('step');
  var i = $(this).parent().parent().find('li[data-step-name=' + s + ']').index();
  $(this).html(i+1);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li>This is step 1</li>
  <li>This is step 2</li>
  <li data-step-name="widget">This is step 3. Create the widget.</li>
  <li>This is step 4</li>
  <li>This is step 5</li>
  <li>This is step 6, we jump to step <span data-step="last"></span> </li>
  <li>This is step 7</li>
  <li>This is step 8</li>
  <li data-step-name="last">This is step 9</li>
  <li>Take the widget that you created in step <span data-step="widget"></span> and do x.</li>
</ol>
<ol>
  <li data-step-name="widget">This is step 1. Create the widget.</li>
  <li>This is step 2</li>
  <li>This is step 3</li>
  <li>This is step 4, we jump to step <span data-step="last"></span> </li>
  <li data-step-name="last">This is step 5</li>
  <li>Take the widget that you created in step <span data-step="widget"></span> and do x.</li>
</ol>

Upvotes: 1

Related Questions