Make "Un-ordered list" behave like an "ordered list" with Javascript

Question

I need to display numbers which each list item in an un-ordered list. To achieve this, I tried to convert an un-ordered ul list tag into an ordered ol list tag (see my script below). I need to do this because I want each li tag to display its order number next to it.

Here is the script that I tried which I found on codepen:

var ul = document.getElementsByClassName("productGrid")[0]
var ol = document.createElement("ol");

var li = ul.querySelectorAll('li');
for(var i=0;i<li.length;i++) {
  ol.appendChild(li[i]);
}

setTimeout(function() {
  ul.parentNode.replaceChild(ol,ul);
},1000);

This works but as expected it ruined the "styles" set to that ul tag. So instead of turning it into an actual ol tag, I need to keep it as a ul and display numbers some other way.

How can I use JavaScript to find out how many li's are inside the ul tag and then display the appropriate number within the li tag (via something like a span tag)

Any help with this would be much appreciated.

ol1 is not a tag name I've ever heard of? Did you mean ol? If ol, that will select an existing ordered list, not an existing unordered list — CertainPerformance
– CertainPerformance, Commented Feb 6, 2019 at 1:01
“I need to do this because I want each li tag to display its order number next to it.” You mean like what happens when you apply the CSS list-style: decimal? — Ry-
– Ry- ♦, Commented Feb 6, 2019 at 1:03
list-style: decimal could work but how do i style the number? — KYSSE
– KYSSE, Commented Feb 6, 2019 at 1:06

Dacre Denny · Accepted Answer · 2019-02-06 01:09:49Z

Have you considered a pure-CSS based approach instead?

You could achieve a similar counting effect on an unordered-list without the need for JavaScript via the :before pseudo-element, and the counter-reset and counter-increment CSS properties.

Here's a snippet to demonstrate this technique in action:

.number-list {
  /* Init your custom counter for children */
  counter-reset: number-list-counter;

  /* Hide point list style */
  list-style:none; 
}

.number-list li {
  position:relative;
}

.number-list li:before {
	/* 
  Set content of pseduo element by parent counter
  and increment the counter 
  */
  content: counter(number-list-counter);
  counter-increment: number-list-counter;
  
  /* Offset position of counter pseduo elements */
  position:absolute;
  top:0;
  left:-2rem;

  /* Apply some styling to the numbering */
  color: red;
  font-weight:bold;
  font-size:1.5rem;
}

<ul class="number-list">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
<ul>

Collectives™ on Stack Overflow

Make "Un-ordered list" behave like an "ordered list" with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related