首页 > 试题广场 >

列表内容排序再渲染

[编程题]列表内容排序再渲染
  • 热度指数:7009 时间限制:C/C++ 5秒,其他语言10秒 空间限制:C/C++ 256M,其他语言512M
  • 算法知识视频讲解
场景描述:在一个 HTML 页面中,有一个无序列表(ul),其中包含了一些项目(li)。每个项目都有一个文本内容和一个唯一的 ID。你需要编写一个 JavaScript 函数来提取列表中所有项目的文本内容,并将它们按照 ID 进行排序,然后将排序后的文本内容重新渲染回去。
代码实现:补全sortAndReturnTextContent函数,实现功能
运行sortAndReturnTextContent函数前

运行sortAndReturnTextContent函数后

<script>
    function sortAndReturnTextContent() {
        const parent = document.getElementById('myList')
        // 在此补全代码
        parent.replaceChildren(...Array.from(parent.children).sort((a,b) => a.id.localeCompare(b.id)))
    }
    sortAndReturnTextContent()
</script>

发表于 2025-06-06 10:51:48 回复(0)
    function sortAndReturnTextContent() {
      const items = document.getElementById('myList').children;
      // 在此补全代码
      // 1.分别提取ID数组和文本内容数组
      var arrId=[],arrText=[]
      for(let i in items){
        arrId.push(items[i].id);
        arrText.push(items[i].innerHTML)
      }
      // 2.简单排序
      arrId.sort();
      arrText.sort();
      // 3.将排序后的ID数组和文本内容数组重新赋回去
      for(let i in items){
        items[i].id=arrId[i],
        items[i].innerHTML=arrText[i];
      }
    }

发表于 2025-04-05 19:49:44 回复(0)
<!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 myList = document.getElementById('myList')
      const items = [...document.getElementById('myList').children];
      const fragment = document.createDocumentFragment();
      const newItems = new Array(items.length)
      // 在此补全代码
      items.forEach(i => {
        let id = i.id
        let number = id.replace(/\D/g, '');
        newItems[number] = i
      })
      newItems.forEach(i => fragment.appendChild(i))
      myList.innerHTML = ""
      myList.appendChild(fragment)
    }
    sortAndReturnTextContent()
  </script>



</body>

</html>

发表于 2024-09-05 10:24:41 回复(0)
<!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;
      // 在此补全代码
     Array.from(items).sort((a, b) => {
                return a.id > b.id ? '1' : '-1'
            }).forEach(item => document.getElementById('myList').appendChild(item))
    }
    sortAndReturnTextContent()
  </script>


</body>

</html>
发表于 2024-04-26 13:43:31 回复(0)
document.getElementById('myList').innerHTML = [...items].map(item => ({
            id: item.id.charCodeAt(4),
            dom: item.outerHTML
            })
    ).sort((a,b) => a.id - b.id).map(item => item.dom).join('')
编辑于 2024-03-11 19:28:26 回复(0)