Javascript для... кажется, возвращает только все остальные индексы в массиве
У меня есть страница (на самом деле, около тридцати или около того), где я пытаюсь изменить имя класса конкретных элементов на основе переменной строки запроса. Все отлично работает, кроме этой части, я получаю действительно странный результат...
var hitAreas = document.getElementsByClassName('hitArea');
alert(hitAreas.length);
for(hitArea in hitAreas)
{
alert(hitAreas[hitArea]);
hitAreas[hitArea].className = 'hitArea_practice';
}
Предупреждение (hitAreas.length); Строка правильно возвращает количество элементов (7, из HTML ниже) с именем класса "hitArea", но когда я выполняю итерацию по hitAreas, это только изменяет имена классов для каждого другого элемента на странице. На полпути он возвращает значение undefined в качестве значения для alert(hitAreas[hitArea]); предположительно, потому что он пытается ссылаться на элементы массива за индексом 6.
Тело HTML-страницы:
<body onload="toggleHotspotHints();">
<div>
<img src="Dashboard1.jpg" width="1440" height="795" />
<div class="hitArea" style="top: 55px; left: 230px; width: 72px; height: 17px;" onclick="gotoPage('BatchReconcile/1-ClaimsReconcileMenu');"></div>
<div class="hitArea" style="top: 55px; left: 319px; width: 72px; height: 17px;" onclick="gotoPage('Eligibility/PP Elig 1');"></div>
<div class="hitArea" style="top: 55px; left: 409px; width: 72px; height: 17px;" onclick="gotoPage('REPORTS/5-Dashboard Reports List');"></div>
<div class="hitArea" style="top: 137px; left: 260px; width: 145px; height: 21px;" onclick="gotoPage('Dash2_Messages');"></div>
<div class="hitArea" style="top: 223px; left: 247px; width: 126px; height: 19px;" onclick="gotoPage('ClaimsList_Failed');"></div>
<div class="hitArea" style="top: 242px; left: 247px; width: 126px; height: 14px;" onclick="gotoPage('PayerReportList');"></div>
<div class="hitArea" style="top: 258px; left: 247px; width: 126px; height: 14px;" onclick="gotoPage('ADM/1_trending graph');"></div>
</div>
Демонстрация в реальном времени: http://jsfiddle.net/simevidas/LE6UN/
1 ответ
Šime Vidas отметил, что getElementsByClassName
повторно запускает живой nodeList, что означает, что сохраненная коллекция будет обновляться по мере изменения вещей (здесь class
атрибуты).
var hitAreas = document.getElementsByClassName('hitArea'),
hitAreasLength = hitAreas.length;
while ( hitAreasLength-- > 0) {
hitAreas[hitAreasLength].className = 'hitArea_practice';
}
Я не уверен, что это самый хороший код, но он работает:)