Вход

Просмотр полной версии : Приписывание интервалов значений к ключам в массиве

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
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
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
-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
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
Что-то мне кажется, что рони прав (пост 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
drakonolom,
Если четные то по сотке?

короче, суть в том чтобы с левого и правого края до этой кучи элементов было одинаковое расстояние при лобых количествах элементов(см. скриншот : https://pp.userapi.com/c831209/v831209164/1ac5ea/FER9g76LyyY.jpg
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
<!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>

так?

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