Как сменить класс другого div-a

[sotik]

Приветствую.
Есть вот такая функция:
function change_visibility (block_4_close, block_4_open) {
document.getElementById(block_4_close).style.displ ay='none';
document.getElementById(block_4_open).style.displa y='';
}
И есть вот такие дивы:
<div id="r0" style="display:none">
<span onclick="change_visibility ('r0')">0 канал</span>
</div>
<div id="r1">
<span onclick="change_visibility ('r1')">1 канал</span>
</div>
<div id="r2">
<span onclick="change_visibility ('r2')">2 канал</span>
</div>
<div id="r3">
<span onclick="change_visibility ('r3')">3 канал</span>
</div>

Как правильно прописать цикл в функции,чтобы он перебирал эти дивы.
Нужно,чтоб по клику на одном он естественно скрывался, а тот который в это время скрыт - появлялся.

[sotik]

Вобщем отчасти я решил задачку, но еще надо обточить чуток...
Спешу поделиться (уже подправил и обтачивать нечего.. если только break добавить...:
function change_visibility (Nak)
{
var divs = new Array();
var i = 0;
while(document.getElementById('r' + i))
{
divs[i] = document.getElementById('r' + i);
if(divs[i].style.display=='none')
{
divs[i].style.display='';
alert(i);
}
i++;
}
document.getElementById(Nak).style.display='none';
}

Тут можно и без массива обойтись,но оставил пока так.

[devote]

реализация getElementsByClassName() для IE

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

[lord2kim]

devote, мб...у меня везде работает...

[noid]

Вот я крот слепой, сижу жду ответов пару дней, как вдруг на тебе - заметил вторую страницу... позор мне.

Спасибо за ответы мужики, сейчас буду разбираться

[noid]

И все-таки самый простой и рабочий вариант (я по-крайней мере его хоть понимаю) вот - http://memkey.net/blockheight/d.html
Только прошу вас самый простой скрипт смены стиля блока в зависимости от его высоты. При чем без всяких идентификаторов, просто, чтобы все блоки id="lom" меньше 200px становились display = "none"; Я пробовал вариант от lord2kimа адаптировать:

<script type="text/javascript">
function func() {
if (document.getElementById('lom').offsetHeight >= 200) {
    document.getElementsByClassName("item").style.display = "none";
}
else {
    document.getElementsByClassName("item").style.display = "block";  
}
}
 
window.onload = func();
</script>

но ничего не получается. Знаний мне не хватает. Как та собака, понимаю, что жрать хочу, а как написать хз.

p.s. Не критично, но если можно, скажите как правильно тут написать онклик, чтобы кнопка по нажатию пропадала:

<script type="text/javascript">
$(document).ready(function(){
	$('.item .holder').each(function(){
		var holder = $(this);
		var parent = $(this).parent('.item');
		if(holder.height() > parent.height()) {
			parent.after($('<button id="butts">Открыть</button>').on('click',function(){
				parent.height(holder.height());
				return false;
			}));
		}
	});
});
</script>

[noid]

С высотой решил при помощи jquery - http://memkey.net/blockheight/d.html совсем убрал высоту из css и указал скриптом:

$(document).ready(function()
{
 $("div.item").each(function(){
   if($(this).height() > 200){
     $(this).css({height: '200px'}); // или  $(this).css({height: '100%'});
   }
 });
});

Так даже лучше - если скрипты не работают то блок полностью загружается.

Только теперь осталось кнопку убрать при нажатии... Помогайте пжлст.

[noid]

Всем спасибо, все решилось вот так:

$(window).load(function()
{
 $("div.item").each(function(){
   if($(this).height() > 200){
     $(this).css({height: '200px'});
   }
 });
}); 

$(window).load(function(){
    $('.item .holder').each(function(){
        var holder = $(this);
        var parent = $(this).parent('.item');
        if(holder.height() > parent.height()) {
            parent.after($('<center><button class="butts">Открыть</button></center>').click(function(){
                parent.height(holder.height());
                $(this).hide();
                return false;
            }));
        }
    });
});