Javascript-форум - Вывод div'ов

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Вывод div'ов (https://javascript.ru/forum/dom-window/69417-vyvod-div%27ov.html)

Igor710

20.06.2017 23:18

Вывод div'ов

Доброго времени суток, просьба помочь в следующем вопросе

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
	
        <div id="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		
		<div class="b"></div>
    </body>
	<style>
	.b{
	height:100px;
	width:100px;
	background:grey;
	float:left;
	margin-right:2px;
	}
	.a{
	height:100px;
	width:100px;
	background:black;
	float:left;
	margin-right:2px;
	}
	</style>
<script>
window.onload = function(){

    var black = document.querySelectorAll('.a');
	var grey = document.querySelector('.b');
    var i = 0;	
	
    black.length=grey.length;

	for(i=0;i<black.length;i++){
	console.log(grey);
	
	}
}
</script>
	</html>

Нужно вывести на страницу те самые блоки которые находятся в переменной grey. Есть вариант с помощью cloneNode, но если таким образом делать, в дальнейшем не получается обратиться к отдельному элементу созданного списка, как еще подобные задачи можно в js реализовать?

Sav2907

20.06.2017 23:32

Igor710,
для начала, id должен быть уникален

Igor710

20.06.2017 23:52

Цитата:

Сообщение от Sav2907 (Сообщение 456093)

Igor710,
для начала, id должен быть уникален

Учел, но на выполнение скрипта это влияние не оказывает

рони	20.06.2017 23:57

Цитата:

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

подожду переводчика

Igor710

21.06.2017 00:09

Цитата:

Сообщение от рони (Сообщение 456101)

подожду переводчика

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
	
        <div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		
		<div class="b" ></div>
		<div id="output"></div>
    </body>
	<style>
	.b{
	height:100px;
	width:100px;
	background:grey;
	float:left;
	margin-right:2px;
	}
	.a{
	height:100px;
	width:100px;
	background:black;
	float:left;
	margin-right:2px;
	}
	.hide{
		display: none;
	}
	</style>
<script>
window.onload = function(){

    var black = document.querySelectorAll('.a');
	var grey = document.querySelector('.b');
    var i = 0;	
	var t;
    

	for(i=0;i<black.length;i++){
	
	t = grey.cloneNode(true);
	document.body.append(t);
	console.log(t);

	}
	t[0].classList.add('hide');
}
</script>
	</html>

Имел ввиду что можно таким образом реализовать, но пытаясь скрыть первый элемент натыкаюсь на ошибку, выходит что к клонированному списку по индексу обратиться не получается, поэтому интересуюсь каким еще образом на страницу можно вывести блок .b количеством равным блокам .а

j0hnik

21.06.2017 00:12

Если clonNode не катит я хз конечно

так пойдет? :blink:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Первый сайт</title>
	<style>
		#b{
			height:100px;
			width:100px;
			background:grey;
			float:left;
			margin-right:2px;
		}
		#a{
			height:100px;
			width:100px;
			background:black;
			float:left;
			margin-right:2px;
		}
	</style>
</head>
<body>
	
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>

	<div id="b"></div>
	<script>
	var black = document.querySelectorAll('#a');
	var grey = document.querySelector('#b');
	var i = black.length;
	while (i--) document.body.innerHTML += grey.outerHTML;
</script>
</body>
</html>

j0hnik

21.06.2017 00:41

может в этом дело?

black.length=grey.length;

Вы обрезали массив black (до оного элемента в данном случае)

Igor710

21.06.2017 00:48

Цитата:

Сообщение от j0hnik (Сообщение 456103)

Если clonNode не катит я хз конечно

так пойдет? :blink:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Первый сайт</title>
	<style>
		#b{
			height:100px;
			width:100px;
			background:grey;
			float:left;
			margin-right:2px;
		}
		#a{
			height:100px;
			width:100px;
			background:black;
			float:left;
			margin-right:2px;
		}
	</style>
</head>
<body>
	
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>

	<div id="b"></div>
	<script>
	var black = document.querySelectorAll('#a');
	var grey = document.querySelector('#b');
	var i = black.length;
	while (i--) document.body.innerHTML += grey.outerHTML;
</script>
</body>
</html>

Спасибо за вариант, а при данной реализации каким образом можно обратиться к отдельному элементу нового списка, чтобы, предположим, скрыть его?

Igor710

21.06.2017 00:51

Цитата:

Сообщение от j0hnik (Сообщение 456104)

может в этом дело?

black.length=grey.length;

Вы обрезали массив black (до оного элемента в данном случае)

Почему, консоль же вроде вывод 6 дивов в grey, или я что то не так понимаю

рони	21.06.2017 00:52

Igor710,
:-? возможно вы хотели так ...

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <style>
  .b{
  height:100px;
  width:100px;
  background:grey;
  float:left;
  margin-right:2px;
  }
  .a{
  height:100px;
  width:100px;
  background:black;
  float:left;
  margin-right:2px;
  }
  .hide{
    display: none;
  }
  </style>
    </head>
    <body>

        <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    <div class="b" ></div>
    <div id="output"></div>


<script>
window.onload = function(){

  var black = document.querySelectorAll('.a');
  var grey = document.querySelector('.b');
  var i = 1;
  var t;


  for(;i<black.length;i++){

  t = grey.cloneNode(true);
  document.body.insertBefore(t,grey);
  console.log(t);

  }
  grey.classList.add('hide');
}
</script>
</body>
  </html>

j0hnik

21.06.2017 00:58

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Первый сайт</title>
	<style>
		#b{
			height:100px;
			width:100px;
			background:grey;
			float:left;
			margin-right:2px;
		}
		#a{
			height:100px;
			width:100px;
			background:black;
			float:left;
			margin-right:2px;
		}
	</style>
</head>
<body>
	
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>
	<div id="a"></div>

	<div id="b"></div>
	<script>
	var black = document.querySelectorAll('#a');
	var grey = document.querySelector('#b');
	var i = black.length;
	while (i--) {
		document.body.innerHTML += grey.outerHTML;
	}
	document.querySelectorAll('#b')[3].style.backgroundColor = "red";
</script>
</body>
</html>

так например, только советую все таки ID на класс сменить и создавать через .cloneNode или createElement

рони	21.06.2017 01:01

Igor710,
если нужен массив то массив и сделайте

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <style>
  .b{
  height:100px;
  width:100px;
  background:grey;
  float:left;
  margin-right:2px;
  }
  .a{
  height:100px;
  width:100px;
  background:black;
  float:left;
  margin-right:2px;
  }
  .hide{
    display: none;
  }
  </style>
    </head>
    <body>

        <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    <div class="b" ></div>
    <div id="output"></div>


<script>
window.onload = function(){

  var black = document.querySelectorAll('.a');
  var grey = document.querySelector('.b');
  var i = 0;
  var t = [];


  for(;i<black.length-1;i++){

  t[i] = grey.cloneNode(true);
  document.body.insertBefore(t[i],grey);
  console.log(t[i]);

  }
  t[i] = grey;
  t[0].classList.add('hide');
}
</script>
</body>
  </html>

j0hnik

21.06.2017 01:12

Igor710, поздравляю вас с первым сайтом! ;)

Igor710

21.06.2017 01:25

Цитата:

Сообщение от рони (Сообщение 456108)

Igor710,
:-? возможно вы хотели так ...

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <style>
  .b{
  height:100px;
  width:100px;
  background:grey;
  float:left;
  margin-right:2px;
  }
  .a{
  height:100px;
  width:100px;
  background:black;
  float:left;
  margin-right:2px;
  }
  .hide{
    display: none;
  }
  </style>
    </head>
    <body>

        <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    <div class="b" ></div>
    <div id="output"></div>


<script>
window.onload = function(){

  var black = document.querySelectorAll('.a');
  var grey = document.querySelector('.b');
  var i = 1;
  var t;


  for(;i<black.length;i++){

  t = grey.cloneNode(true);
  document.body.insertBefore(t,grey);
  console.log(t);

  }
  grey.classList.add('hide');
}
</script>
</body>
  </html>

Не совсем так, мне хотелось бы чтобы к элементам нового созданного списка можно было обращаться по индексу, т.е точно так же как в переменной black. То есть когда я пишу black[2].classList.add('hide'), то третий элемент этого списка скрывается, но с новым списком grey так уже не получается, когда пишу grey.classList.add('hide'), скрывается почему то только последний элемент, а когда пытаюсь обратиться по индексу grey[2].classList.add('hide'), браузер не находит такого элемента.

Igor710

21.06.2017 01:27

Цитата:

Сообщение от j0hnik (Сообщение 456111)

Igor710, поздравляю вас с первым сайтом! ;)

Всмысле?)

рони	21.06.2017 01:29

Цитата:

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

можно было обращаться по индексу

пост №12 массив t

j0hnik

21.06.2017 01:31

Цитата:

Сообщение от Igor710 (Сообщение 456115)

Всмысле?)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>

Igor710

21.06.2017 01:34

Цитата:

Сообщение от j0hnik (Сообщение 456117)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>

Шаблонная заготовка :)

Igor710

21.06.2017 01:35

Цитата:

Сообщение от рони (Сообщение 456110)

Igor710,
если нужен массив то массив и сделайте

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <style>
  .b{
  height:100px;
  width:100px;
  background:grey;
  float:left;
  margin-right:2px;
  }
  .a{
  height:100px;
  width:100px;
  background:black;
  float:left;
  margin-right:2px;
  }
  .hide{
    display: none;
  }
  </style>
    </head>
    <body>

        <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    <div class="b" ></div>
    <div id="output"></div>


<script>
window.onload = function(){

  var black = document.querySelectorAll('.a');
  var grey = document.querySelector('.b');
  var i = 0;
  var t = [];


  for(;i<black.length-1;i++){

  t[i] = grey.cloneNode(true);
  document.body.insertBefore(t[i],grey);
  console.log(t[i]);

  }
  t[i] = grey;
  t[0].classList.add('hide');
}
</script>
</body>
  </html>

Спасибо, прошу прощения у участников обсуждения за этот вопрос)

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