首页 > 试题广场 >

列表内容排序再渲染

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

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

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

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

运行sortAndReturnTextContent函数前

运行sortAndReturnTextContent函数后

算法知识视频讲解

性感大宝剑

<!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 回复(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)

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

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

提交观点

问题信息

难度：

7条回答 9收藏 285浏览

列表内容排序再渲染

问题信息

热门推荐

相关试题