Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2017, 23:18
Аспирант
Отправить личное сообщение для Igor710 Посмотреть профиль Найти все сообщения от Igor710
 
Регистрация: 09.08.2016
Сообщений: 31

Вывод 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 реализовать?

Последний раз редактировалось Igor710, 20.06.2017 в 23:51.
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2017, 23:32
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

Igor710,
для начала, id должен быть уникален
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2017, 23:52
Аспирант
Отправить личное сообщение для Igor710 Посмотреть профиль Найти все сообщения от Igor710
 
Регистрация: 09.08.2016
Сообщений: 31

Сообщение от Sav2907 Посмотреть сообщение
Igor710,
для начала, id должен быть уникален
Учел, но на выполнение скрипта это влияние не оказывает
Ответить с цитированием
  #4 (permalink)  
Старый 20.06.2017, 23:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Igor710
Нужно вывести на страницу те самые блоки которые находятся в переменной grey. Есть вариант с помощью cloneNode, но если таким образом делать, в дальнейшем не получается обратиться к отдельному элементу созданного списка, как еще подобные задачи можно в js реализовать?
подожду переводчика
Ответить с цитированием
  #5 (permalink)  
Старый 21.06.2017, 00:09
Аспирант
Отправить личное сообщение для Igor710 Посмотреть профиль Найти все сообщения от Igor710
 
Регистрация: 09.08.2016
Сообщений: 31

Сообщение от рони Посмотреть сообщение
подожду переводчика
<!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 количеством равным блокам .а
Ответить с цитированием
  #6 (permalink)  
Старый 21.06.2017, 00:12
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Если 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, 21.06.2017 в 00:18.
Ответить с цитированием
  #7 (permalink)  
Старый 21.06.2017, 00:41
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

может в этом дело?
black.length=grey.length;

Вы обрезали массив black (до оного элемента в данном случае)
Ответить с цитированием
  #8 (permalink)  
Старый 21.06.2017, 00:48
Аспирант
Отправить личное сообщение для Igor710 Посмотреть профиль Найти все сообщения от Igor710
 
Регистрация: 09.08.2016
Сообщений: 31

Сообщение от 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>
Спасибо за вариант, а при данной реализации каким образом можно обратиться к отдельному элементу нового списка, чтобы, предположим, скрыть его?
Ответить с цитированием
  #9 (permalink)  
Старый 21.06.2017, 00:51
Аспирант
Отправить личное сообщение для Igor710 Посмотреть профиль Найти все сообщения от Igor710
 
Регистрация: 09.08.2016
Сообщений: 31

Сообщение от j0hnik Посмотреть сообщение
может в этом дело?
black.length=grey.length;

Вы обрезали массив black (до оного элемента в данном случае)
Почему, консоль же вроде вывод 6 дивов в grey, или я что то не так понимаю
Ответить с цитированием
  #10 (permalink)  
Старый 21.06.2017, 00:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод контента в модалном окне, чтобы к нему можно было обратиться по ссылке decadent42 jQuery 3 11.04.2016 15:12
Вывод выбранных данных и проверка checkbox MasterHrust Javascript под браузер 3 28.09.2011 17:44
Вывод переменных MasterHrust Javascript под браузер 4 03.08.2011 15:41
Вывод данных в Друпал 6 из MySQL, небольшая работа torquemada Работа 1 22.05.2011 17:05
Пошаговый вывод скрипта для IE всех версий. Zidky Элементы интерфейса 10 17.06.2009 18:27