How to organize a list with dimensions-CodePudding

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!

CodePudding user response：

Try the following:

Add ONE place where you hold your data in ONE format
Change the format if you need to

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>

CodePudding user response：

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>