Как мне сделать упорядоченный список, используя JavaScript? - PullRequest
Новая
       13

Как мне сделать упорядоченный список, используя JavaScript?

0 голосов
/ 19 января 2011

Допустим, у меня есть это 

<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 и заменяя их упорядоченным списком.

Или, может быть, что-то вроде этого 

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

Где i ++ будет увеличиваться каждый раз, начиная с 1

Да, я знаю, что я предоставляю заказанный список!

Ответы [ 4 ]

2 голосов
/ 19 января 2011

Вы можете иметь пустой div и использовать javascript для ввода innerHTML внутри 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;
}

EDIT

Тем не менее, JQuery по-прежнему лучший вариант

1 голос
/ 19 января 2011

Возможно, вы хотите перебрать детей <ol> и манипулировать их 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;
  }
}
1 голос
/ 19 января 2011

Я бы посоветовал вам изучить (использовать) инфраструктуру javascript для достижения этой цели. Это ускорит вашу разработку JavaScript. Jquery очень популярен в настоящее время, и я думаю, что вы также должны использовать это. В Stackoverflow уже есть тема с использованием Jquery, описывающая, что вы хотите => Создание неупорядоченного списка с помощью jQuery

0 голосов
/ 03 декабря 2018

вы могли бы сделать что-то вроде этого: 

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