Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Ширина блоков из списка (https://javascript.ru/forum/dom-window/67270-shirina-blokov-iz-spiska.html)

Роман Андреевич 07.02.2017 08:45

Ширина блоков из списка
 
Уважаемые коллеги, доброго времени суток.
Суть вопроса такова:

есть разметка -
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>


далее есть код JS:

/*объект значений ширины*/
var wid = {
one: {
value: 150
},
two: {
value: 100
},
three: {
value:50
},
four: {
value:400
}
}
/* список элементов*/
var elems = document.querySelectorAll('ul li');

/*Далее необходимо задать всем li из списка ширину - значения в объекте wid*/


Вопрос. Как это сделать в цикле???? Помгите плиз.
заранее спасибо

ksa 07.02.2017 08:50

Цитата:

Сообщение от Роман Андреевич
Как это сделать?

Пройтись циклом по первым ключам объекта, считать какой это по счету ключ... Менять значение ширины у соответствующего элемента списка...

Роман Андреевич 07.02.2017 08:51

// for (var s in components){
			// 	var percent = Math.round((components[s].value*100)/components[s].parent);	
			// 	for (var i =0;i < spans.length;i++) {
			// 		spans[i].setAttribute('style', 'width:' + percent + '%');
			// 	}
			// }

Роман Андреевич 07.02.2017 08:52

for (var s in components){
var percent = Math.round((components[s].value*100)/components[s].parent);	
for (var i =0;i < spans.length;i++) {
spans[i].setAttribute('style', 'width:' + percent + '%');
}
}

Роман Андреевич 07.02.2017 08:52

вот так не работает((((

Роман Андреевич 07.02.2017 08:54

вернее вот так правильно
for (var s in wid){
var percent = Math.round((wid[s].value*100)/40);	
for (var i =0;i < elems.length;i++) {
elems[i].setAttribute('style', 'width:' + percent + '%');
}
}

ksa 07.02.2017 08:54

Роман Андреевич, делай сразу полный пример. Огрызки никому не нужны.

ksa 07.02.2017 08:56

Цитата:

Сообщение от Роман Андреевич
вернее вот так правильно

Не совсем понятно чего ты тут добиваешься двойным циклом...

ksa 07.02.2017 08:57

Цитата:

Сообщение от Роман Андреевич
elems[i].setAttribute('style', 'width:' + percent + '%');

Накрутил... :)
elems[i].style.width=percent + '%';

Роман Андреевич 07.02.2017 09:00

Полный пример:

/*объект значений ширины*/
var wid = {
one: {
   value: 150
},
two: {
   value: 100
},
three: {
   value:50
},
four: {
   value:400
}
}

var elems = document.querySelectorAll('ul li');
/*перебираем ключи у объекта ширин*/
for (var s in wid){
   var percent = Math.round(wid[s].value/100));	
}
/*добавляем каждому li свою ширину из объекта*/
   for (var i =0;i < elems.length;i++) {
      elems[i].setAttribute('style', 'width:' + percent + '%');
   }


В итоге он всем выдает 50%


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