Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 21.06.2017, 00:58
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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
Ответить с цитированием
  #12 (permalink)  
Старый 21.06.2017, 01:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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>

Последний раз редактировалось рони, 21.06.2017 в 01:07.
Ответить с цитированием
  #13 (permalink)  
Старый 21.06.2017, 01:12
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Igor710, поздравляю вас с первым сайтом!
Ответить с цитированием
  #14 (permalink)  
Старый 21.06.2017, 01:25
Аспирант
Отправить личное сообщение для Igor710 Посмотреть профиль Найти все сообщения от Igor710
 
Регистрация: 09.08.2016
Сообщений: 31

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

Сообщение от j0hnik Посмотреть сообщение
Igor710, поздравляю вас с первым сайтом!
Всмысле?)
Ответить с цитированием
  #16 (permalink)  
Старый 21.06.2017, 01:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Igor710
можно было обращаться по индексу
пост №12 массив t
Ответить с цитированием
  #17 (permalink)  
Старый 21.06.2017, 01:31
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Igor710 Посмотреть сообщение
Всмысле?)
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
Ответить с цитированием
  #18 (permalink)  
Старый 21.06.2017, 01:34
Аспирант
Отправить личное сообщение для Igor710 Посмотреть профиль Найти все сообщения от Igor710
 
Регистрация: 09.08.2016
Сообщений: 31

Сообщение от j0hnik Посмотреть сообщение
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Первый сайт</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
Шаблонная заготовка
Ответить с цитированием
  #19 (permalink)  
Старый 21.06.2017, 01:35
Аспирант
Отправить личное сообщение для Igor710 Посмотреть профиль Найти все сообщения от Igor710
 
Регистрация: 09.08.2016
Сообщений: 31

Сообщение от рони Посмотреть сообщение
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>
Спасибо, прошу прощения у участников обсуждения за этот вопрос)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод контента в модалном окне, чтобы к нему можно было обратиться по ссылке 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