Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Приписывание интервалов значений к ключам в массиве (https://javascript.ru/forum/misc/75379-pripisyvanie-intervalov-znachenijj-k-klyucham-v-massive.html)

drakonolom 01.10.2018 19:12
Приписывание интервалов значений к ключам в массиве
 
Всем привет! Возникла задача: я беру три элемента при помощи document.getElementsByClassName('element') в этом поле допустим находится 3 элемента. Мне каждому из них нужно приписать маржин лефт с интервалом в 50 пикселей как в отрицательном значении так и в положительном. Тобишь. Если элементов в массиве будет 3 то будет так : элемент 1: маржин лефт -50. Элемент 2: маржин лефт 0, элемент 3: маржин - лефт 50. Как это правильней сделать, наведите на решение, джаваскрипт сенсеи

рони 01.10.2018 20:37
drakonolom,
https://webref.ru/css/justify-content
space-between

drakonolom 02.10.2018 10:29
Цитата:
Сообщение от рони (Сообщение 495657)
drakonolom,
https://webref.ru/css/justify-content
space-between
мне не нужен css, у меня эти элементы в контейнере где огромное количество других элементов.

j0hnik 02.10.2018 10:38 
var mgr = -50,
els = document.getElementsByClassName('element');
[].forEach.call(els, function(el,i){
if(i) mgr+=50;
el.style.marginLeft = mgr+'px';
});

drakonolom 02.10.2018 15:32
Цитата:
Сообщение от j0hnik (Сообщение 495674) 
var mgr = -50,
els = document.getElementsByClassName('element');
[].forEach.call(els, function(el,i){
if(i) mgr+=50;
el.style.marginLeft = mgr+'px';
});
спасибо добрый человек! Еще мне нужно сделать так что если у нас будет допустим пять элементов то теперь ключи будут распределятся так: -100 -50 0 50 100
если 7 то : -150 -100 -50 0 50 100 150
думаю принцип понятен, я попытаюсь сделать этот кусок кода сам но на всякий случай попрошу помощи здесь =)

MC-XOBAHCK 02.10.2018 16:02
Цитата:
Сообщение от drakonolom (Сообщение 495680)
-100 -50 0 50 100
Могу ошибаться, но проверьте вот так:
var els = document.getElementsByClassName('element');
var mgr = (els.length - Math.ceil(els.length / 2)) * -50;

[].forEach.call(els, function(el,i){
    if(i) mgr+=50;
    el.style.marginLeft = mgr+'px';
});

Исходил из того, что элементов нечётное количество (как в примере), центр на нуле.

j0hnik 02.10.2018 22:03
drakonolom,
четное количество может быть?

drakonolom 03.10.2018 10:37
Цитата:
Сообщение от j0hnik (Сообщение 495699)
drakonolom,
четное количество может быть?
да, четное количество может быть. В таком случаи должно быть -150 -50 +50 150, как бы чтобы между элементами было одинаковое расстояние. ухх как сложно :write: :cray:

Dilettante_Pro 03.10.2018 10:56
Что-то мне кажется, что рони прав (пост 2)
<style>
    .space-between {
       display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
   }
  </style>
<section class="container">
   <div>Другой элемент</div>
  <section class="space-between">
   <div>1</div><div>2</div><div>3</div>
  </section>
  <div>Еще другой элемент</div>
  <section class="space-between">
   <div>11</div><div>22</div><div>33</div><div>44</div>
  </section>
  <div>Совсем другой элемент</div>
</section>

j0hnik 03.10.2018 11:30
drakonolom,
Если четные то по сотке?

drakonolom 03.10.2018 12:05
Цитата:
Сообщение от Dilettante_Pro (Сообщение 495719)
Что-то мне кажется, что рони прав (пост 2)
<style>
    .space-between {
       display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
   }
  </style>
<section class="container">
   <div>Другой элемент</div>
  <section class="space-between">
   <div>1</div><div>2</div><div>3</div>
  </section>
  <div>Еще другой элемент</div>
  <section class="space-between">
   <div>11</div><div>22</div><div>33</div><div>44</div>
  </section>
  <div>Совсем другой элемент</div>
</section>

нуу, впринципе да, рабочая тема. Дело в том что у меня сейчас такая структура кода: 

<section class="container">
   <div class="element"></div>
<div class="element-1"></div>
<div class="element"></div>
<div class="element-2"></div>
<div class="element"></div>
<div class="element-3"></div>
</section>


обозначенные элементы можно закинуть в отдельный див с флексбоксом и от него уже потом работать :) Но над решением с js нужно еще подумать :thanks:

drakonolom 03.10.2018 12:15
Цитата:
Сообщение от j0hnik (Сообщение 495720)
drakonolom,
Если четные то по сотке?
короче, суть в том чтобы с левого и правого края до этой кучи элементов было одинаковое расстояние при лобых количествах элементов(см. скриншот :

j0hnik 03.10.2018 12:21 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.container {
		display: flex;
		margin-bottom: 10px;
		justify-content: center;
	}
	.container > div {
		width: 50px;
		height: 50px;
		margin: 0 2px;
		background-color: red;
	}
</style>
</head>
<body>
	<section class="container">
		<div class="element">1</div>
		<div class="element-1">2</div>
		<div class="element">3</div>
		<div class="element-2">4</div>
		<div class="element">5</div>
		<div class="element-3">6</div>
	</section>
</body>
</html>


так?

MC-XOBAHCK 03.10.2018 13:54
Для адаптива в .container можно добавить свойство:
flex-wrap: wrap;

drakonolom 03.10.2018 14:56
Цитата:
Сообщение от j0hnik (Сообщение 495728) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.container {
		display: flex;
		margin-bottom: 10px;
		justify-content: center;
	}
	.container > div {
		width: 50px;
		height: 50px;
		margin: 0 2px;
		background-color: red;
	}
</style>
</head>
<body>
	<section class="container">
		<div class="element">1</div>
		<div class="element-1">2</div>
		<div class="element">3</div>
		<div class="element-2">4</div>
		<div class="element">5</div>
		<div class="element-3">6</div>
	</section>
</body>
</html>


так?
ну принцип да, такой, если решить это с флексбоксами.


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