题解 | #列表内容排序再渲染#
列表内容排序再渲染
https://www.nowcoder.com/practice/2dffcb354a484995894655a5547b0b49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul id="myList">
<li id="item1">项目 1</li>
<li id="item3">项目 3</li>
<li id="item2">项目 2</li>
<li id="item4">项目 4</li>
</ul>
<script>
function sortAndReturnTextContent() {
const items = document.getElementById('myList').children;
const numReg = /\d*$/;
const ArrayItems = Array.from(items)
const getIdToNumber=(idStr)=>{
const idExec = numReg.exec(idStr)
return (idExec && idExec[0]!== undefined && Number(idExec[0] || 0))
}
const newArray = ArrayItems.sort((a,b)=>{
const curId = getIdToNumber(a.id)
const nextId = getIdToNumber(b.id)
return curId - nextId
})
const listContainer = document.getElementById('myList')
listContainer.innerHtml = ''
newArray.map(item=>{listContainer.appendChild(item)})
}
sortAndReturnTextContent()
</script>
</body>
</html>
