Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2010, 14:32
Аспирант
Отправить личное сообщение для denisok82 Посмотреть профиль Найти все сообщения от denisok82
 
Регистрация: 10.04.2010
Сообщений: 34

getElementsByClassName
Здравствуйте, помогите пожалуйста разобраться с getElementsByClassName.
Пол дня уже читаю мануалы и в конец запутался, как сделать рефреш перед началом функции?
Пробывал добавить в функцию location.reload(), но работает не так, как надо.

<html>
<head>

<style>
  p {margin:0px;}
</style>

<script type="text/javascript">
 function find_c1() {
   var f1 = document.getElementById('layer').getElementsByClassName('c1')
     for (var i=0; i<f1.length; i++)
	     f1[i].style.visibility = "hidden";
 }
  function find_c2() {
    var f2 = document.getElementById('layer').getElementsByClassName('c2')
      for (var i=0; i<f2.length; i++)
	     f2[i].style.visibility = "hidden";
 }
  function find_c3() {
    var f3 = document.getElementById('layer').getElementsByClassName('c3')
      for (var i=0; i<f3.length; i++)
	     f3[i].style.visibility = "hidden";
 }
  function find_c4() {
    var f4 = document.getElementById('layer').getElementsByClassName('c4')
      for (var i=0; i<f4.length; i++)
	     f4[i].style.visibility = "hidden";
 }
</script>

</head>
<body>
  <input id="but1" type="button" value="Убрать 1" onclick="find_c1()" />
  <input id="but2" type="button" value="Убрать 2" onclick="find_c2()" />
  <input id="but3" type="button" value="Убрать 3" onclick="find_c3()" />
  <input id="but4" type="button" value="Убрать 4" onclick="find_c4()" />
  
<div id="layer" style="padding-top: 20px; padding-left: 40px;">
  <p class="c1">100</p>
  <p class="c2">110</p>
  <p class="c3">120</p>
  <p class="c4">130</p>
  <p class="c1">140</p>
  <p class="c2">150</p>
  <p class="c3">160</p>
  <p class="c4">170</p>
</div>

</body>
</html>

Последний раз редактировалось denisok82, 10.04.2010 в 21:56. Причина: Обновление вопроса
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2010, 14:58
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,245

такого метода нету
во всяком случае он некросбраузерен, поэтому для этой цели есть эмуляция
http://javascript.ru/unsorted/top-10...lementsbyclass
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2010, 15:44
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Сообщение от Gvozd
такого метода нету
Фигасе...
http://www.w3.org/TR/html5/dom.html#...ntsbyclassname
Да, некроссбраузерен и декларирован в черновике спецификации HTML5, но тем не менее реализован более чем год (два?) тому назад в основных прогрессивных браузерах (IE, само собой, туда не входит, Opera 9.5+, FF3+).

Кстати, по той же спецификации видно, что метод принимает один аргумент. А у Вас, denisok82, что передается вторым аргументом, да еще и необъявленной переменной?
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2010, 20:42
Аспирант
Отправить личное сообщение для denisok82 Посмотреть профиль Найти все сообщения от denisok82
 
Регистрация: 10.04.2010
Сообщений: 34

Вот так вроде работает, как думаете, правильно?
<script type="text/javascript">
 function find_c1() {
   var f1 = document.getElementById('layer').getElementsByClassName('c1')
     for (var i=0; i<f1.length; i++)
       alert(i);
 }
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2010, 20:56
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Правильно, но, как отметил Gvozd, некроссбраузерно. Поэтому, если нужна поддержка IE, то придется использовать решение по ссылке выше.
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2010, 21:02
Аспирант
Отправить личное сообщение для denisok82 Посмотреть профиль Найти все сообщения от denisok82
 
Регистрация: 10.04.2010
Сообщений: 34

По ссылке Гвоздя я посмотрел. Пока тяжела она еще для меня. Слишком там всё запутано. Пока впитываю знания, упражняюсь на ФФ.
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2010, 21:49
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Там нет ничего сложного.
if(document.getElementsByClassName) { // есть есть родная фукнция, используем ее
	getElementsByClass = function(classList, node) {    
		return (node || document).getElementsByClassName(classList) // вызываем метод getElementsByClassName нужного узла.
		// если  указан node, то будет произведен поиск в нем, иначе во всем документе
	}

} else { // если родной функции нет, то будем обходить DOM
	getElementsByClass = function(classList, node) {			
		var node = node || document, // узел, в котором ищем
			list = node.getElementsByTagName('*'),  // выбираем все дочерние узлы
			length = list.length, // количество дочерних узлов
			classArray = classList.split(/\s+/), // разбиваем список классов
			classes = classArray.length, // длина списка классов 
			result = [], i,j
		for(i = 0; i < length; i++) { // перебираем все дочерние узлы
			for(j = 0; j < classes; j++)  { //перебираем все классы
				if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) { // если текущий узел имеет текущий класс
					result.push(list[i]) // запоминаем его
					break // прекращаем перебор классов
				}
			}
		}
	
		return result // возвращаем набор элементов
	}
}
Ответить с цитированием
  #8 (permalink)  
Старый 10.04.2010, 22:02
Аспирант
Отправить личное сообщение для denisok82 Посмотреть профиль Найти все сообщения от denisok82
 
Регистрация: 10.04.2010
Сообщений: 34

B@rmaley.e><e,
Спасибо большое! Обязательно поковыряю этот кроссбраузерный вариант.
[hr]
А подскажите, я вот в первом посте обновил код и вопрос. Не найду никак нужного метода.
Пытался вот так, но этот код не работает как было задумано:
function find_c1() {
 window.location.reload(); // вот после этого не выполняются нижеследующие инструкции почему-то
   var f1 = document.getElementById('layer').getElementsByClassName('c1')
     for (var i=0; i<f1.length; i++)
	     f1[i].style.visibility = "hidden";
 }
Ответить с цитированием
  #9 (permalink)  
Старый 10.04.2010, 22:15
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

А с чего бы им выполняться, если после выполнения
location.reload()
начнет ся переход на другую страницу (пусть и с таким же адресом)?
Ответить с цитированием
  #10 (permalink)  
Старый 10.04.2010, 22:19
Аспирант
Отправить личное сообщение для denisok82 Посмотреть профиль Найти все сообщения от denisok82
 
Регистрация: 10.04.2010
Сообщений: 34

У меня не хватает знаний. Укажите направление, куда копать?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск