HTML中利用js对的数组从小到大进行排序
时间: 2023-07-20 20:20:36 浏览: 56
可以使用JavaScript对HTML中的数组进行排序。假设有如下一个HTML页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Array Sorting Example</title>
<script src="sort.js"></script>
</head>
<body>
<h1>Array Sorting Example</h1>
<button onclick="sortArray()">Sort Array</button>
<ul id="myList">
<li>3</li>
<li>1</li>
<li>5</li>
<li>2</li>
<li>4</li>
</ul>
</body>
</html>
```
我们可以在 `sort.js` 中编写JS代码,实现对数组的排序:
```javascript
function sortArray() {
const list = document.getElementById("myList");
const items = list.getElementsByTagName("li");
const arr = [];
for (let i = 0; i < items.length; i++) {
arr.push(parseInt(items[i].textContent));
}
arr.sort((a, b) => a - b);
for (let i = 0; i < items.length; i++) {
items[i].textContent = arr[i];
}
}
```
这里的 `sortArray()` 函数首先获取到 `myList` 元素,然后获取到所有的 `li` 元素,并将它们的文本内容转换成数字存入一个数组中。接着对这个数组进行排序,最后再将排序后的结果写回到每个 `li` 元素中。在HTML中点击按钮后,就可以看到数组已经按照从小到大的顺序排列了。