упрощая код

Question

Код, который у меня становится немного долго, я думаю, что есть способ, чтобы упростить его, посмотрите на него:

var slidernav = document.getElementsByTagName('li'); 
slidernavinital = 20; 
slidernavadd = 30; 
slidernav[0].style.top = slidernavinital + slidernavadd*0 + 'px'; 
slidernav[1].style.top = slidernavinital + slidernavadd*1 + 'px'; 
slidernav[2].style.top = slidernavinital + slidernavadd*2 + 'px'; 
slidernav[3].style.top = slidernavinital + slidernavadd*3 + 'px'; 
slidernav[4].style.top = slidernavinital + slidernavadd*4 + 'px'; 
slidernav[5].style.top = slidernavinital + slidernavadd*5 + 'px'; 
slidernav[6].style.top = slidernavinital + slidernavadd*6 + 'px'; 
slidernav[7].style.top = slidernavinital + slidernavadd*7 + 'px'; 
slidernav[8].style.top = slidernavinital + slidernavadd*8 + 'px'; 
slidernav[9].style.top = slidernavinital + slidernavadd*9 + 'px'; 
slidernav[10].style.top = slidernavinital + slidernavadd*10 + 'px'; 
slidernav[11].style.top = slidernavinital + slidernavadd*11 + 'px'; 

Не возможно сделать что-то вроде этого:

document.getElementsByTagName('li')[x].style.top = 20 + 30*x + 'px'; 

Большое спасибо!

Answer 1

Да. Оберните его в петлю for.

for(var i = 0; i < sliderNav.length; i++) { 
    sliderNav[i].style.top = sliderNavInitial + sliderNavAdd*i + "px"; 
} 

Я думаю, вы должны подобрать Введение в программирование книги, хотя, если вы не знали о циклах (что точка компьютера, если он не заботится о повторяющихся вещи для вас?)

EDIT: Кстати, цикл for является сокращением для следующей конструкции while петли:

var i = 0; 
while(i < sliderNav.length) { 
    sliderNav[i].style.top = sliderNavInitial + sliderNavAdd*i + "px"; 
    i++; 
} 

Он просто ставит все «бухгалтерии» на первой линии петли, так что вы можете более легко предсказать, сколько раз это будет l петля. (А в то время как петля только петли, пока условие не будет выполнено, а затем останавливается, так что если вы забыли включить i++; часть, он никогда не остановится.)

Answer 2

вы можете использовать для

как это

var ln = slidernav.length; 
for(var i = 1;i<=ln;i++) 
{ 
    slidernav[i].style.top = slidernavinital + slidernavadd*i + 'px'; 
} 

Это очень простая программирующая конструкция.

Answer 3

Используйте петлю для циклического перемещения элементов.

var slidernav = document.getElementsByTagName('li'); 
slidernavinital = 20; 
slidernavadd = 30; 
for (var n = 0; n<slidernav.length; n++) { 
    slidernav[n].style.top = slidernavinital + slidernavadd*n + 'px'; 
}