Форум

Igor710 · #1 (**permalink**) 20.06.2017, 23:18

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

<!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 · #2 (**permalink**) 20.06.2017, 23:32

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

Igor710 · #3 (**permalink**) 20.06.2017, 23:52

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

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

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

рони · #4 (**permalink**) 20.06.2017, 23:57

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

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

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

Igor710 · #5 (**permalink**) 21.06.2017, 00:09

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

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

<!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 · #6 (**permalink**) 21.06.2017, 00:12

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

так пойдет?

<!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 · #7 (**permalink**) 21.06.2017, 00:41

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

black.length=grey.length;

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

Igor710 · #8 (**permalink**) 21.06.2017, 00:48

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

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

так пойдет?

<!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 · #9 (**permalink**) 21.06.2017, 00:51

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

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

black.length=grey.length;

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

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

рони · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript