如何使用JavaScript制作有序列表?

本文介绍了如何使用JavaScript制作有序列表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我们说我有这个

<ol>
  <li>V1 One</li>
  <li>V1 Two</li>
  <li>V1 Three</li>
  <li>V1 Four</li>
</ol>`

我想使用.js而不是使用LI标记来创建有序列表.我在想js.代码可以替换第一个V1并将其命名为1.，替换第二个V1并将其命名为两个，依此类推，换句话说，计算存在的V1数量并将其替换为有序列表.

I want to make an ordered list using .js instead of using LI tags.I was thinking the js. code could replace first V1 and call it 1. , replace second V1 and call it two and so on, in other words counting how many V1s there are and replacing them with ordered list.

或者也许是这样

<ol>
  <li>i++ V1 One</li>
  <li>i++ V1 Two</li>
  <li>i++ V1 Three</li>
  <li>i++ V1 Four</li>
</ol>

从1开始每次都会增加i ++的地方

Where i++ will be increased every time starting from 1

是的，我知道LI提供了有序列表！

Yes, I know LI provide ordered list!

推荐答案

也许您想遍历<ol>的子代并操纵它们的innerHTML?

Perhaps you want to loop through the children of <ol> and manipulate their innerHTML?

// Get the <ol> object from the DOM
var chillun = document.getElementById("yourOL").childNodes;

// Loop through the children of the <ol>
for(i=0;i<chillun.length;i++) {
  // Test that the node is indeed an <li>
  if(chillun[i].nodeName=='LI') {
    // Change this line to manipulate the text however you need
    chillun[i].innerHTML = i;
  }
}

这篇关于如何使用JavaScript制作有序列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

v1