在jQuery中,可以使用sort()方法对div元素进行排序。但是,这种方法不会更改原始HTML文档的结构,而是返回一个新的排序后的div元素集合。因此,您需要将排序后的div元素插入到原始div元素的末尾,如下所示:
<div id="myDiv">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script>
// 获取 div 元素
var myDiv = document.getElementById("myDiv");
// 将 div 元素插入到原始 div 元素的末尾
myDiv.parentNode.insertBefore(myDiv.childNodes, myDiv);
// 使用 sort() 方法对 div 元素进行排序
myDiv.querySelectorAll("div").sort(function(a, b) {
return parseInt(a.textContent) - parseInt(b.textContent);
});
</script>
在上面的代码中,我们首先使用getElementById()
方法获取要排序的div元素,然后使用insertBefore()
方法将排序后的div元素插入到原始div元素的末尾。最后,我们使用querySelectorAll()
方法获取要排序的div元素集合,并使用sort()
方法按文本内容进行排序。
需要注意的是,sort()
方法会直接修改原始集合,而不是返回一个新的排序后的集合。因此,如果您需要保留原始集合的顺序,则应该使用for
循环来遍历集合,并手动比较每个元素并进行排序,如下所示:
// 获取 div 元素
var myDiv = document.getElementById("myDiv");
// 将所有 div 元素添加到一个新的集合中
var divs = [];
var children = myDiv.children;
for (var i = 0; i < children.length; i++) {
divs.push(children[i]);
}
// 对新集合中的所有元素进行排序
divs.sort(function(a, b) {
return parseInt(a.textContent) - parseInt(b.textContent);
});
// 将排序后的元素插入到原始 div 元素的末尾
myDiv.appendChild(divs[0]);
for (var i = 1; i < divs.length; i++) {
myDiv.appendChild(divs[i]);
}
在上面的代码中,我们首先使用children
属性获取所有子元素,并将它们存储在一个新的集合中。然后,我们使用sort()
方法对新集合中的所有元素进行排序。最后,我们使用appendChild()
方法将排序后的元素一个一个地添加到原始div元素的末尾。
领取专属 10元无门槛券
手把手带您无忧上云