Как правильно пройтись по списку элементов и задать каждому ширину в зависимости от содержания?

Question

[weranda]

Приветствую
Сразу пример на jsfiddle.
В раздумьях. Есть список и каждому эелемнту списка надо задать нижнее подчеркивание в зависимости от текущей и максимально допустимой скорости из всего списка.

Представим что у нас есть список из Х элементов. Список не отсортирован, формат записи такой:

spoiler

<ul>
	<li>скорость 20 <span>км</span></li>
	<li>скорость 30 <span>км</span></li>
	<li>скорость 40 <span>км</span></li>
	<li>40 ка скорость</li>
	<li>30 км скорость</li>
	<li>20 км скорость</li>
	<li>моя скорость 30 км</li>
	<li>моя скорость 20 км</li>
	<li>моя скорость 50 ка</li>
	<li>скорость 10</li>
	...
</ul>

Ищем максимальную скорость — отпределяем только цифры:

spoiler

var maxSpeed = 0;
$('ul li').each(function () {
	// удаляем все буквы, преобразуем к числу
    var speed = +$(this).text().replace(/\D/g,'');
    if (speed > maxSpeed) {
        maxSpeed = speed;
    }
});

Тегу li нельзя задавать какую-либо ширину, только before. И что делать дальше, чтобы для псевдоэлемента before задать нужную ширину — я ХЗ. На ум приходит пока только одна мысль:

— в файле стилей прописать 100 правил ширины для тега li

spoiler

li.speed-1:before{width: 1%}
li.speed-2:before{width: 2%}
li.speed-3:before{width: 3%}
...

— еще раз пройтись по всем жлементам списка, рассчитать ширину (текущую срокость разделить / максимальную из всех и умножыть * 100 (с округлением)) и задать тегу li класс:

spoiler

$('li').each(function () {
    var speed = +$(this).text().replace(/\D/g,'');
    if (speed > 0) {
        $(this).addClass('speed-' + (speed/maxSpeed*100).toFixed(0))
    }
});

Но кажется мне, что этот вариант какой-то не такой. Что посоветуете?

Comments

[alexalexes]

Тегу li нельзя задавать какую-либо ширину, только before.

Чем обусловлено такое ограничение?

[weranda]

alexalexes, тем что на самом деле список вовсе не список, а таблица с фиксированной шириной колонок, менять размеры которых недопустимо, в том числе добавлять в них дополнительные элементы и устанавливать им ширину. В общем, такая штука — есть ограничения.

Answer 1

[Ihor Bratukh]

Функция трансформирования:

function transform(value, in_min, in_max, out_min, out_max) {
	return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

value - текущее значение
in_min - минимально возможное значение value
in_max - максимально возможное значение value
out_min - минимальное значение, которое хотим получить
out_max - максимальное значение, которое хотим получить

Например, максимальная скорость 50 (in_max) и минимальная 0 (in_min). Мы хотим отобразить линию от 0 (out_min) до 100 (out_max), проверять будем значение 25 (value);
При value 25 мы получим линию со значением 50.
К этим 50 добавляем потом px или % и добавляем ширину линии.

Пример: codepen

var maxSpeed = 50;

$('strong', $('p')).text(maxSpeed);

$.each($('ul li'), function() {
	var speed = Number($(this).text().replace(/\D/g,''));
	$(this).append('<div style="width:'+ transform(speed, 0, maxSpeed, 0, 150) +'px"></div>');
});

function transform(value, in_min, in_max, out_min, out_max) {
  return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

Answer 2

[Ваня]

$('li').each(function () {
  var speed = +$(this).text().replace(/\D/g,'');
  if (speed > 0) {
    var i = 'speed-' + (speed/maxSpeed*100).toFixed(0);
    $(this).addClass(i).append('<style  type="text/css">.'+i+':before{width: '+speed+'%;}</style>');
  }
});

убрать

/*
li.speed-10:before{width: 10%}
li.speed-20:before{width: 20%}
li.speed-30:before{width: 30%}
li.speed-40:before{width: 40%}
li.speed-50:before{width: 50%}
li.speed-60:before{width: 60%}
li.speed-70:before{width: 70%}
li.speed-80:before{width: 80%}
li.speed-90:before{width: 90%}
li.speed-100:before{width: 100%}
*/

Comments

[weranda]

Вариант похлеще моего;)

[Ваня]

weranda, чем? это решение соответствует вашему ограничению в работе, никаких блоков внутри не создается. Определитесь что вам надо