Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   много <div> а скрипт один (https://javascript.ru/forum/events/21515-mnogo-div-skript-odin.html)

DimaRogov 13.09.2011 12:48

много <div> а скрипт один
 
вопрос такой:

есть много элементов <div id = 'name'></div> :
<div id = 'name'></div>
<div id = 'name'></div>
<div id = 'name'></div>
<div id = 'name'></div>
         ......
<div id = 'name'></div>

<button id = 'but'>Click me</button>


есть скрипт:
var but = document.getElementById('but');
var elem = document.getElementById('name');

//убирает элемент <div id= 'name'></div> 
var hid = function() { elem.style.display = 'none'; } 
                      

but.addEventListener('click',hid,false);


Вопрос: Почему убирается только первый элемент <div id= 'name'></div>

Триви 13.09.2011 12:50

Потому что айди, он на то и айди, чтобы быть уникальным!

nikita.mmf 13.09.2011 15:13

Вот костыль
document.getElementById('but').addEventListener('click', function( e ) { 
	var elem = (e && e.target || event.srcElement || document).previousSibling;
	for( ;elem; elem = elem.previousSibling ) {
		if ( elem.id == "name" ) {
			elem.style.display = "none"
		}
	}
}, false);

devote 13.09.2011 16:02

<div id="name">1</div> 
<div id="name">2</div> 
<div id="name">3</div> 
<div id="name">4</div> 
<div id="name">5</div> 
  
<button id = 'but'>Click me</button>

<script type="text/javascript">
var but = document.getElementById('but'); 
var elem = document.querySelectorAll('[id="name"]'); 
  
//убирает элемент <div id= 'name'></div>  
var hid = function() {
    for(var i = 0; elem[ i ]; i++ ) {
        elem[ i ].style.display = 'none';
    }
}  
                        
  
but.addEventListener('click',hid,false);
</script>

walik 13.09.2011 17:06

Зачем человеку советовать костыли ? что бы он всегда так делала потом ?
Что мешает его направить на правильный путь ? К примеру сказать что бы использовал класс вместо ИД ?

unclechu 13.09.2011 22:50

id должен быть уникальным! Используй class.
<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
…
<div class='name'></div>


var c = document.getElementsByClassName('name');
for (var i=0; i<c.length; i++) {
c[i].style.display = 'none';
}


Вроде так.

Триви 13.09.2011 23:38

Цитата:

Сообщение от unclechu (Сообщение 126355)
id должен быть уникальным! Используй class.
<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
…
<div class='name'></div>


var c = document.getElementsByClassName('name');
for (var i=0; i<c.length; i++) {
c[i].style.display = 'none';
}


Вроде так.

В IE getElementsByClassName работать не будет, потому что его там нет.
Тут придётся реализовать новый метод с таким же именем
(в инете таких примеров навалом)
но недостаток метода в том, что он перебирает все элементы DOM
в поисках элемента с нужным классом, а это всё таки время..

Может лучше делать такую штуку с указанием на родителя, если он известен?
Что скажут на эту тему профи?
Или это уже параноя? )))

ваый 13.09.2011 23:56

Цитата:

Сообщение от Триви
Может лучше делать такую штуку с указанием на родителя, если он известен?
Что скажут на эту тему профи?
Или это уже параноя? )))

так это и делается, все правильно, указывается контекст для поиска, если известен. например, http://javascript.ru/unsorted/top-10...lementsbyclass

Триви 14.09.2011 00:01

Цитата:

Сообщение от ваый (Сообщение 126366)
контекст для поиска

Вот они правильные слова!
Никак не мог сформулировать по причине нубизма))
Но чуял всё правильно :)

DimaRogov 17.09.2011 18:11

спасибо всем кто написал, но после слов триви уже все понял=)


Часовой пояс GMT +3, время: 08:00.