Форум

Elve · #1 (**permalink**) 18.08.2012, 13:33

Доброго времени суток, вот по чуть учу Js и столкнулся с задачей, которую не получается решить. Может вы подскажите в чем моя ошибка.
Задача: Вот так выглядит страница. В каждом вложенном диве есть еще элементы. Задача поменять местами второй и третий див. У них есть классы но нет Id. Обязательно делать именно жс и кроссбраузерно.

<div id="content-wrap">
  <div></div>
  <div></div>
  <div></div>
</div>

Вот я написал такое дело

var main = document.getElementById('content-wrap')
var divall = main.getElementsByTagName('div')
main.appendChild(divall[1])

Логика моя: Выбрали див с ид content-wrap. Пробежались по нему и выбрали все div. Див который второй взяли и перекинули в конец родителя. При таком коде мне Лисичка пишет

TypeError: main is null
var divall= main.getElementsByTagName('div')

cyber · #2 (**permalink**) 18.08.2012, 15:02

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
<div id='wrapper'> 
    <div>1 </div>
    <div> 2</div>
    <div>3 </div>
    <div> 4</div>
  </div>  
  <script>

var wrapper_ = document.getElementById('wrapper');

var elem =  wrapper_.children[1];
   
 wrapper_.insertBefore(elem, wrapper_.children[3])  
    


    </script>

  </body>
</html>

Elve · #3 (**permalink**) 18.08.2012, 21:45

Спасибо большое, как же все просто было...

Aetae · #4 (**permalink**) 18.08.2012, 22:56

main is null
Т.е. нет элемента с таким id. С вероятностью 100% вы запускаете скрипт раньше чем в коде появляется данный элемент. Javscript выполняется по мере загрузки, а не после.(если вы специально того не обозначите)

...

<div id="content-wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<script type="text/javascript">
var main = document.getElementById('content-wrap')
var divall = main.getElementsByTagName('div')
main.appendChild(divall[1])
</script>

Aetae · #5 (**permalink**) 18.08.2012, 23:02

И да, решение от cyber, не будет работать если элементов 3, надо так:

var wrapper_ = document.getElementById('wrapper');
var elem =  wrapper_.children[1];
wrapper_.insertBefore(elem, wrapper_.children[3] || null) //ксли вторым параметром null - работает как appeendChild, а если undefined - кидает ошибку

Elve · #6 (**permalink**) 18.08.2012, 23:21

А вот у меня возник еще один вопрос, задача стояла куда более обширно нежели тут описал в итоге поучил вот такой код

<script>
	var wrapper_ = document.getElementById('content-wrap');
	var elem =  wrapper_.children[4];
	var after_main =  wrapper_.children[2];
	after_main.style.width = "900px";
	var after_main_stage1 = after_main.children[0];
	var after_main_stage2 = after_main.children[1];
	after_main_stage1.style.cssText = "float:left;\ ";
	after_main_stage1.rule.style.cssText = "float:left;\ ";
	after_main_stage2.style.cssText = "float:left;\ ";
	var after_main_stage3 = after_main_stage2.children[1];
	after_main_stage3.style.cssText = "float:left;\
	width:300px;\ " ;
 	wrapper_.insertBefore(elem, wrapper_.children[2]) 
	wrapper_.children[2].style.width = "940px";
	var cat_ch3 = elem.children[0];
	var cat_ch4 = cat_ch3.children[1];
	var light = elem.children[1];
	var light2 = elem.children[2];
	cat_ch4.parentNode.insertBefore(light2, cat_ch4.nextSibling);
	cat_ch4.parentNode.insertBefore(light, cat_ch4.nextSibling);
	elem.children[0].style.cssText = "position:relative ; \ ";
	light.style.cssText="position:absolute;\
	bottom:45px; \ ";
	light2.style.cssText="position:absolute;\
	bottom:25px; \ ";
	var float_l = document.getElementsByTagName('td');
	var text_float = float_l[0];
	var text_float_stage1 = text_float.children[0];
	var dd_st = text_float_stage1.getElementsByTagName('dd');
	for (var i=0; i < dd_st.length; i++)
	 {
		dd_st[i].style.cssText="float:left !important; \
		width:160px;\ ";
	 }
	var dt_st = text_float_stage1.getElementsByTagName('dt');
	for (var i=0; i < dt_st.length; i++)
	 {
		dt_st[i].style.cssText="float:left !important; \
		width:120px;\ ";
	 }/**/
	var td_1 =  document.getElementsByTagName('td');
	td_1[0].style.cssText = "width:300px;\
	padding-top:21px;\
	float:left;\ ";
	td_1[1].style.cssText = "float:left; \ ";
	var float_l_stage1 = float_l[1];
	var float_l_stage2 = float_l_stage1.children[0];
	var float_l_stage3 = float_l_stage2.children[1];
	var float_l_stage4 = float_l_stage3.children[0];
	float_l_stage4.children[0].style.width = "570px";
	float_l_stage4.children[0].style.height = "125px";
	var btn = document.getElementById('btn_holder');
	var btn_prev = btn.previousElementSibling ;
	
	btn.style.cssText="float:left !important; \
	";
	btn_prev.style.cssText="float:left !important; \
	margin-left:250px;\ ";
	var width_line = document.getElementById('updates');
	width_line.children[0].style.cssText = "width:200px;\ ";
  </script>

И все бы хорошо, все работает так как надо КРОМЕ IE ниже 9... Я так понял нельзя использовать cssText , но на что заменить и как?

Aetae · #7 (**permalink**) 18.08.2012, 23:32

Нет, cssText работал всегда. Дело в previousElementSibling, ie<9 не знают такого.

Сразу напишу функцию, но на самом деле лучше вообще не использовать:

function prev( el ){
  while(el=el.previousSibling) if(el.nodeType === 1) break;
  return el
}

Elve · #8 (**permalink**) 18.08.2012, 23:40

after_main_stage1.style.cssText = "float:left;\ ";
мне отладчик ИЕ ругается на это и пишет

SCRIPT5007: Не удалось получить значение свойства "style": значением объекта является NULL или он не определен
Contact Us.htm, строка 229 символ 2

А что с этой функцией написанной вами делать? В смысле где ее вызывать и с какой целью

Aetae · #9 (**permalink**) 18.08.2012, 23:45

Очевидно, что проблема с after_main_stage1, в котором вообще нет style;
Сделайте

alert(after_main_stage1)

и посмотрите, что он вам напишет.

Сообщение от Elve

А что с этой функцией написанной вами делать? В смысле где ее вызывать и с какой целью

Вместо el.previousElementSibling использовать prev( el ).

Elve · #10 (**permalink**) 19.08.2012, 01:04

Спасибо Aetae за помощь, но вопрос актуален... Получается, что ИЕ видит Коментарии в коде и принимает их как часть кода... Как бы это обойти, может кто подскажет?

Форум

Справочник

Discord чат

Курсы javascript