首页 > 试题广场 >

列表内容排序再渲染

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

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

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

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

运行sortAndReturnTextContent函数前

运行sortAndReturnTextContent函数后

算法知识视频讲解

牛客645383471号

    function sortAndReturnTextContent() {
      const items = document.getElementById('myList').children;
      // 在此补全代码
      document.getElementById('myList').innerHTML = [...items]
      .sort((a,b)=>a.id.slice(4)-b.id.slice(4))
      .map(e=>e.outerHTML)
      .join('');
    }
    sortAndReturnTextContent()

发表于 2024-11-11 17:43:33 回复(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
        // 在此补全代码
        document.getElementById('myList').innerHTML = Array.from(items)
          .sort((a, b) => parseInt(a.id.slice(4)) - parseInt(b.id.slice(4)))
          .map((item) => item.outerHTML)
          .join('')
      }
      sortAndReturnTextContent()
    </script>
  </body>
</html>

发表于 2024-03-17 21:01:51 回复(1)

桦少

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

function sortAndReturnTextContent() {

const items = document.getElementById('myList').children;//获取所有子节点为一个数组

let arr = []//设置一个空数组

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

{

arr[i] = Number(items[i].id.charAt(items[i].id.length-1))

}//将所有id的最后一个数字拿出来变成一个新数组

let newArr = arr.map(function(num){

return "item" + num

document.getElementById('myList').innerHTML = ''//清空ul的innerhtml

newArr.forEach(item => {

const li = document.createElement('li')

li.id = item

li.innerText = '项目' + ' ' + (newArr.indexOf(item) + 1)

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

})

//循环数组newArr，每次创建一个新的li,

//li的id为每一个元素,li的innerText为'项目+空格+数字(当前元素的index+1)'

//然后将每一个li插入到ul中

}

sortAndReturnTextContent()

</script>

</body>

</html>

发表于 2025-03-18 11:27:51 回复(0)

MaxFly6

<!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 liArrays = [...items];
        liArrays.sort((a, b) => {
          return parseInt(a.id[4]) - parseInt(b.id[4]);
        });
        for (let i of liArrays) {
          document.getElementById("myList").appendChild(i);
        }
    }
    sortAndReturnTextContent()
  </script>
</body>
</html>

发表于 2024-04-03 14:28:42 回复(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)

机灵的袋鼠刷了100道题

function sortAndReturnTextContent() {
    const list = document.getElementById("myList");
    // `Array.from()` 创建的数组中是对DOM元素的引用（而非副本）
    Array.from(list.children)
        .sort((a, b) => Number(a.id.slice(4)) - Number(b.id.slice(4)))
        // 若插入的节点已经存在，
        // `appendChild()`会将其从当前位置移动到新位置，无需事先删除。
        // DOM中，同一个节点只能存在于一个位置。
        .forEach((item) => list.appendChild(item));
}

发表于 2025-03-26 16:46:10 回复(0)

zero_to_hero_m

  function sortAndReturnTextContent() {
      const items = document.getElementById('myList').children;
      // 在此补全代码
      //htmlCollection 是实时 ->浅拷贝成副本 
      //直接移动元素排序，而不是修改文本
      //sort比较函数： <0 a在b前
      const eleNodes =  Array.from(items).sort((a,b)=>a.id>b.id?1:-1) //升序 元素节点
      eleNodes.forEach(ele=>items[0].parentElement.appendChild(ele))
    }

发表于 2025-03-20 23:40:52 回复(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)

牛客454430009号

<!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;
      // 在此补全代码
    }
    sortAndReturnTextContent()
  </script>



</body>

</html>

发表于 2024-06-07 08:18:28 回复(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)

美丽的我等一个offer

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

function sortAndReturnTextContent() {

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

// 在此补全代码

console.log(items)

let arr = []

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

arr.push(items[i].id)

}

arr.sort();

for (let i of arr) {

document.getElementById("myList").appendChild(document.getElementById(i));

}

sortAndReturnTextContent()

</script>

</body>

</html>

编辑于 2024-04-23 15:10:58 回复(0)

码主

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

function sortAndReturnTextContent() {

const ulElement = document.getElementById('myList')

const items = ulElement.children;

const newChildren = Array.from(items).sort((a, b) => parseInt(a.innerText.replace('项目 ', '')) - parseInt(b.innerText.replace('项目 ', '')))

const fragment = document.createDocumentFragment()

newChildren.forEach(item => fragment.appendChild(item))

ulElement.innerHTML = ''

ulElement.appendChild(fragment)

// 在此补全代码

}

sortAndReturnTextContent()

</script>

</body>

</html>

发表于 2024-04-08 21:57:07 回复(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)

微风拂过你的脸颊

<!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 newItems = Array.from(items);
        const length = newItems.length;
        for (let i = 0; i < length; i++) {
            for (let j = 0; j < (length - 1); j++) {
                const [, id1] = newItems[j].getAttribute('id').split('item');
                const [, id2] = newItems[j+1].getAttribute('id').split('item');
                if (Number(id1) > Number(id2)) {
                    const temp = newItems[j];
                    newItems[j] = newItems[j + 1];
                    newItems[j + 1] = temp; 
                }
            }
        }
        for (const item of newItems) {
            document.getElementById('myList').appendChild(item);
        }
    }
    sortAndReturnTextContent()
  </script>



</body>

</html>

编辑于 2024-02-07 10:38:11 回复(0)

提交观点

问题信息

Javascript

难度：

15条回答 29收藏 703浏览

列表内容排序再渲染

问题信息

热门推荐

相关试题