2011-01-19 4 views
0

Допустим, у меня есть этотКак создать упорядоченный список с помощью 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 и заменив их упорядоченным списком.

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

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

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

Да, я знаю, LI обеспечить упорядоченный список!

+1

что вы принимаете? – amosrivera

+0

Другими словами, откуда взялись данные, из которых вы хотите манипулировать? – Ben

ответ

2

Вы можете иметь пустой 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

Я бы посоветовала вы должны изучить (использовать) инфраструктуру javascript для этого. Это ускорит вашу разработку javascript быстро. JQuery очень популярен на данный момент, и я думаю, вы также должны это использовать. У Stackoverflow allready есть тема, использующая JQuery, описывающая то, что вы хотите =>Generating an unordered list with jQuery

+0

Кроме того, плагин jQuery Template отлично подходит для хранения HTML из вашего JavaScript. –

1

Возможно, вам нужно пройти через детей <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; 
    } 
} 
Смежные вопросы