Как использовать значения data attribute блоков для задания ширины?

Question

[Breeze1]

https://codepen.io/brezze/pen/pXwMyL

Не могу понять, как мне в переменную width подставлять значение дата атрибута именно текущего элемента, сейчас например берется значение первого и подставляется к двум элементам.

Answer 1

[0xD34F]

О каких элементах, атрибуте/свойстве идёт речь:

const selector = '.item';
const key = 'width';
const getVal = el => `${el.dataset[key]}%`;

Обновляем стили:

$(selector).css(key, function() {
  return getVal(this);
});

// или

document.querySelectorAll(selector).forEach(n => {
  n.style[key] = getVal(n);
  // или
  n.style.setProperty(key, getVal(n));
  // или
  n.style.cssText += key + ': ' + getVal(n);
  // или
  n.setAttribute('style', key.concat(': ', getVal(n)));
});

Answer 2

[Дмитрий Гормаш]

Замени свой js на этот:

$(".item").each(function() {
		var w = $(this).data('width');
		$(this).css('width', w + '%');
	});