时间戳

首页 > 解决方案 > 如何组织具有维度的列表

javascript - 如何组织具有维度的列表

问题描述

我想用javascript在我前面的列表项中组织维度。

简单的例子来解释：

<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>

正面预期订单：10CM、20CM、1.5M、2M

诸如获取列表类别并尝试组织之类的东西。将所有内容转换为米，然后返回厘米，但这似乎很复杂。还有什么建议可以和我分享吗？

谢谢！

标签： javascripthtmlarrayssorting

解决方案

使用 jQuery，您可以遍历包含给定类的所有元素，修改值以获得数字，将值推送到数组中然后对其进行排序：

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>

推荐阅读