Как скрыть все блоки с одним Id?

Question

[Евгений Шевцов]

На странице есть 3 вот таких блока.

<li id="loader" ></li>
<li class="sign-up"  id="test" style="display:block;">
Содержимое 
</li>

По нажатию на кнопку они должны исчезать.

var hidden_div=document.getElementById('test');
hidden_div.style.display = 'none';

Понятно, что id уникален, но тогда как прописать несколько id или как сделать?=)

Answer 1

[vdem]

Использовать конечно же классы а не id, как уже ответили. Вот решение на чистом JavaScript:

var els = document.getElementsByClassName('sign-up');
for(var elIndex in els) {
    els[elIndex].style.display = 'none';
}

document.getElementsByClassName() отсутствует в IE (старых версиях как минимум), здесь подробнее как обойти: javascript.ru/forum/events/8731-getelementsbyclass...

Comments

[Евгений Шевцов]

Только я чуток по другому сделал..
for (var i = 0; i < hidden_div.length; i = i + 1) {
hidden_div[i].style.display="none";
}
В Вашем варианте почему то ошибку выдавал...

[Евгений Петров]

@vdem for in по коллекции?.. Полноте вам:) Там же есть, как минимум, свойство length. Наверняка, даже итераторы есть встроенные.

@Rattlesneyk или getElementsByClassName (не работает в IE8), или querySelectorAll (не работает в IE7). Первое грандиозно намного быстрее. Второе, если IE8 до сих поддерживаете.

Answer 2

[Евгений Самойленко]

Подозреваю, что id нужно заменить классом, потому что несколько одинаковых id на одной странице - недопустимо
пишите допустим так:

<li id="loader" ></li>
<li class="sign-up test" style="display:block;">
Содержимое 
</li>

var hidden_div = $('.test');
hidden_div.hide();