首页 > 试题广场 >

列表内容排序再渲染

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

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

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

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

运行sortAndReturnTextContent函数前

运行sortAndReturnTextContent函数后

算法知识视频讲解

HTML/CSS/JavaScript

拥有_

```cpp

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

function sortAndReturnTextContent() {

let arr = [];

const items = document.getElementById('myList').children;

const itemsArray = Array.from(items);

itemsArray.forEach(item=>{

let obj = {

id : Number(item.id.slice(4)),

content: item.innerText,

}

console.log(obj.id, obj.content);

arr.push(obj);

})

arr.sort((a,b)=>a.id - b.id); //根据id排序

console.log(arr);

document.getElementById('myList').innerHTML = ''; //清空列表

for(let i = 0; i < arr.length; i++) {

let li = document.createElement('li');

// 核心修改：不要用 innerHTML 拼接标签，而是直接设置属性

li.id = arr[i].originalId; // 恢复原始 ID (如 "item1")

li.innerText = arr[i].content; // 设置文本内容

document.getElementById('myList').appendChild(li);

}

sortAndReturnTextContent()

</script>

</body>

</html>

```

发表于 2026-01-28 17:55:19 回复(0)

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

Wandzxy

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

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号

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)

提交观点

问题信息

Javascript

难度：

9条回答 38收藏 1221浏览

列表内容排序再渲染

问题信息

热门推荐

相关试题