我想用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
像獲取串列類并嘗試組織之類的東西。將所有東西都轉換為米，然后再回到厘米，但這似乎很復雜。還有什么建議可以與我分享嗎？
謝謝！
uj5u.com熱心網友回復：
請嘗試以下操作：
- 添加一個地方，以一種格式保存您的資料
- 如果需要，請更改格式
下面是一個例子：
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>uj5u.com熱心網友回復：
使用 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/352648.html
標籤：javascript html 数组 排序