首页 > 试题广场 >

列表内容排序再渲染

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

运行sortAndReturnTextContent函数后

算法知识视频讲解
添加回答
HTML/CSS/JavaScript
Wandzxy头像 Wandzxy
<!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)
HTML/CSS/JavaScript
牛客903236132号头像 牛客903236132号
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)
提交观点

问题信息

难度：
3条回答 296浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号