Quiero organizar las dimensiones dentro de una lista de elementos en mi frente, con javascript.
Ejemplo sencillo para explicar:
<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>Orden esperado en frente: 10CM, 20CM, 1,5M, 2M
Algo así como obtener la clase de lista e intentar organizar. Convertir todo a metros y luego volver a centímetros, pero parece complicado. ¿Alguna otra sugerencia para compartir conmigo?
¡Gracias!
Prueba lo siguiente:
Aquí hay un ejemplo:
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>Con jQuery, puede iterar a través de todos los elementos que contienen la clase dada, modificar el valor para obtener un número, insertar los valores en una matriz y luego ordenarlos:
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 eg '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>