I want to organize dimensions inside a list items in my front, with javascript.
Simple example to explain:
<ul class="list-name">
<li class="other-classes size-10-CM">10 CM</li>
<li class="other-classes size-1V5-METRO">1,5 M</li>
<li class="other-classes size-2-METROs">2 M</li>
<li class="other-classes size-10-CM">20 CM</li>
</ul>
Expected order on front: 10CM, 20CM, 1,5M, 2M
Something like get the class of list and try to organize. Convert everything to meters and then going back to centimeters, but it seems complicated. Any other suggestion to share with me?
Thanks!
Try the following:
Here is an example:
const dataInCm = [10, 20, 1500, 2000] // First create a place where you hold data in one format
const metersFactor = 1000
const list = document.querySelector("ul")
const dropdown = document.querySelector("select")
function renderList() {
list.innerHTML = "" // Reset the list if you change the options
dataInCm.forEach((data) => {
const li = document.createElement('li')
if (dropdown.value === "m") {
li.textContent = `${data / metersFactor} M`
} else if (dropdown.value === "cm") {
li.textContent = `${data} CM`
} else {
if (data > 999)
li.textContent = `${data / metersFactor} M`
else
li.textContent = `${data} CM`
}
list.append(li)
})
}
renderList()<select oninput="renderList()">
<option value="auto">Optimize</option>
<option value="cm">CM</option>
<option value="m">M</option>
</select>
<ul>
</ul>Using jQuery you can iterate through all elements who contains the given class, modify the value in order to obtain a number, push the values into an array then sort it:
let allValues = []
function mToCm(value) {
return value * 1000;
}
function getValuesByClass(includedClass, removedValueUnit) {
// iterate through all elements who contains the given class
$.each($('[class*="' + includedClass + '"]'), function(key, value) {
// remove unit from value e.g '10 CM' will be '10'
let onlySize = value.innerHTML.replace(' ' + removedValueUnit, '')
// convert string to number, in order to be sorted later
let valueToNumber = parseFloat(onlySize);
// if unit is M then use mToCm to convert. else return the cm
let convertedValue =
removedValueUnit === 'M' ?
mToCm(valueToNumber) :
valueToNumber
allValues.push(convertedValue)
});
}
getValuesByClass("METRO", "M");
getValuesByClass("CM", "CM");
console.log('initial array ', allValues)
// all values are sorted now, use array as you need
allValues = allValues.sort((a, b) => a - b);
console.log('after sort array ', allValues)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-name">
<li class="other-classes size-10-CM">10 CM</li>
<li class="other-classes size-1V5-METRO">1.5 M</li>
<li class="other-classes size-1V2-METRO">1.2 M</li>
<li class="other-classes size-7-CM">7 CM</li>
<li class="other-classes size-2-METROs">2 M</li>
<li class="other-classes size-10-CM">20 CM</li>
</ul>