首页 > 试题广场 >

列表内容排序再渲染

[编程题]列表内容排序再渲染

热度指数：7009 时间限制：C/C++ 5秒，其他语言10秒空间限制：C/C++ 256M，其他语言512M
算法知识视频讲解

场景描述：在一个 HTML 页面中，有一个无序列表（ul），其中包含了一些项目（li）。每个项目都有一个文本内容和一个唯一的 ID。你需要编写一个 JavaScript 函数来提取列表中所有项目的文本内容，并将它们按照 ID 进行排序，然后将排序后的文本内容重新渲染回去。

代码实现：补全sortAndReturnTextContent函数，实现功能

运行sortAndReturnTextContent函数前

运行sortAndReturnTextContent函数后

算法知识视频讲解

HTML/CSS/JavaScript

zzyscorpio

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

HTML/CSS/JavaScript

牛客334112242号

    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)

HTML/CSS/JavaScript

牛客985418137号

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

HTML/CSS/JavaScript