Javascript-форум - Перебор div'ов for i

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Перебор div'ов for i (https://javascript.ru/forum/dom-window/42787-perebor-div%27ov-i.html)

Перебор div'ов for i

Получаю список блоков, изначально им всем проставлен display:none. При загрузке страницы показываю 5, потом при клике на кнопку следующие 5. Проблема состоит в том, что каждый проход работает в шахматном порядке, первому диву ставит класс, второму display: block и т.п. В чём проблема?

function nextFiveShow() {
	var elems = document.getElementsByClassName('first');
	for ( var i = 0;  i < 5; i++ ) {    
	  elems[i].setAttribute("class", "boxComment show");
	  elems[i].style.display="block";
	}
}

window.onload = function() {	
	nextFiveShow();	
	var clkBtn = document.getElementById("clkButton");
	clkBtn.onclick = function() {
	  nextFiveShow();	  
	}
}

Заранее, спасибо!

<style>
.first {
	display: none;
}
</style>
<input type="button" id="clkButton" value="click me!">
<div class="first">один</div><div class="first">два</div><div class="first">три</div><div class="first">четыре</div><div class="first">пять</div>
<div class="first">двадцать один</div><div class="first">двадцать два</div><div class="first">двадцать три</div><div class="first">двадцать четыре</div><div class="first">двадцать пять</div>
<div class="first">тридцать один</div><div class="first">тридцать два</div><div class="first">тридцать три</div><div class="first">тридцать четыре</div><div class="first">тридцать пять</div>
<div class="first">сорок один</div><div class="first">сорок два</div><div class="first">сорок три</div><div class="first">сорок четыре</div><div class="first">сорок пять</div>
<div class="first">пятьдесят один</div><div class="first">пятьдесят два</div><div class="first">пятьдесят три</div><div class="first">пятьдесят четыре</div><div class="first">пятьдесят пять</div>
<script>
function nextFiveShow() {
	var elems = document.getElementsByClassName('first');
	for ( var i = 0;  i < 5; i++ ) {    
	  elems[i].setAttribute("class", "boxComment show");
	}
};
nextFiveShow()
document.getElementById("clkButton").onclick = nextFiveShow;
</script>

Ну и?

один
три
пять
двадцать два
двадцать четыре

При первом проходе.

Цитата:

Сообщение от Rise (Сообщение 280248)

<style>
.first { display: none; }
</style>
<div class="first">1</div>
<div class="first">2</div>
<div class="first">3</div>
<div class="first">4</div>
<div class="first">5</div>
<div class="first">6</div>
<div class="first">7</div>
<div class="first">8</div>
<div class="first">9</div>
<div class="first">10</div>
<div class="first">11</div>
<div class="first">12</div>
<div class="first">13</div>
<div class="first">14</div>
<div class="first">15</div>
<button id="clkButton">Add</button>
<script>
function nextFiveShow() {
	var elems = document.getElementsByClassName("first");
	for ( var i = 0;  i < 5; i++ ) {    
		elems[0].style.display = "block";
		elems[0].setAttribute("class", "boxComment show");
	}
}
window.onload = function() {
	nextFiveShow();
	var clkBtn = document.getElementById("clkButton");
	clkBtn.onclick = function() {
		nextFiveShow();
	}
}
</script>

Вот оно, точно, массив же меняется! Благодарю!