Comment puis-je faire une liste triée à l'aide de javascript?

Permet de dire que j'ai cette

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

Je veux faire une liste ordonnée de l'aide .js au lieu d'utiliser LI balises.
Je pensais le js. code pourrait remplacer première V1 et de l'appeler en 1. , remplacer la deuxième V1 et de l'appeler en deux et ainsi de suite, en d'autres termes compter combien de V1 et de les remplacer par liste ordonnée.

Ou peut-être quelque chose comme ceci

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

Où i++ sera augmenté à chaque fois à partir de 1

Oui, je sais, LI fournir la liste ordonnée!

  • quel est votre avis?
  • Pour le dire d'une autre façon, où sont les données que vous souhaitez manipuler en venir?
InformationsquelleAutor Alex | 2011-01-19
  1. 2

    Vous pouvez avoir un div vide, et l'utilisation de javascript pour entrer dans le innerHTML à l'intérieur de la div

    function listdown(){
  var startlist = "<ol>";
  var endlist = "</ol>";
  *use a for loop to enter the <LI>, this way, you can do much more with each item*
  document.getElementById("emptydiv").innerHTML = startlist + LI list + endlist;
}

    MODIFIER

    Néanmoins, JQuery est toujours la meilleure option

    InformationsquelleAutor robobooga
  2. 1

    Je vous conseille d'apprendre(utilisation) d'un framework javascript pour accomplir cette tâche. Il permettra d'accélérer votre développement javascript rapidement. Jquery est très populaire en ce moment et je pense que vous devriez également l'utiliser. Stackoverflow a déjà un sujet à l'aide de Jquery, décrivant ce que vous voulez => La génération d'une liste non ordonnée avec jQuery

    • Aussi, le jQuery Template de plugin est merveilleux à garder HTML de votre JavaScript.
    InformationsquelleAutor Alfred
  3. 1

    Peut-être vous souhaitez faire une boucle à travers les enfants de <ol> et de manipuler leur 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;
  }
}
    InformationsquelleAutor Ben
  4. 0

    vous pourriez faire quelque chose comme ceci:

    let ol = document.querySelector('ol');
let i = 1;
ol.querySelectorAll('li').forEach(function(li) {
    li.textContent = (i++) + ' ' + li.textContent;
});
    InformationsquelleAutor aznafro