gpt4 book ai didi

仅限 Javascript - 对一堆 DIV 进行排序

转载 作者:数据小太阳 更新时间:2023-10-29 04:05:38 25 4
gpt4 key购买 nike

<分区>

Possible Duplicate:
Easiest way to sort DOM nodes?

我有一个 DIV 列表,如下所示:

<div id="list">
<div id="categorie5.1-4">4</div>
<div id="categorie5.1-3">3</div>
<div id="categorie5.1-5">5</div>
<div id="categorie5.1-1">1</div>
<div id="categorie5.1-2">2</div>
</div>

我想对它们进行排序,只使用 Javascript(没有 Jquery)得到这样的结果:

1
2
3
4
5

如果需要,我可以使用 DIV id 的末尾:“categorie5.1-4”(服务器端我可以定义 DIV id 以嵌入所需的顺序)

非常感谢您的帮助!


完整代码如下:

<html>
<head>
<script type="text/javascript">
function sortdiv() {
var container = document.getElementById("list");
var elements = container.childNodes;
var sortMe = [];
for (var i=0; i<elements.length; i++) {
if (!elements[i].id) {
continue;
}
var sortPart = elements[i].id.split("-");
if (sortPart.length > 1) {
sortMe.push([ 1 * sortPart[1] , elements[i] ]);
}
}
sortMe.sort(function(x, y) {
return x[0] - y[0];
});
for (var i=0; i<sortMe.length; i++) {
container.appendChild(sortMe[i][1]);
}
document.getElementById("button").innerHTML = "done.";
}
</script>
</head>
<body>
<div id="list">
<div id="categorie5.1-4">4</div>
<div id="categorie5.1-3">3</div>
<div id="categorie5.1-5">5</div>
<div id="categorie5.1-1">1</div>
<div id="categorie5.1-2">2</div>
</div>
<div id="button"><a href="#" onclick="sortdiv();">sort!</a></div>
</body>
</html>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com