Javascript 如何使用此函数获取已排序的div的HTML？

这是我需要排序的HTML分区：

<div id="divtosort">
    <div class="datasort" data-order="2">2</div>
    <div class="datasort" data-order="4">4</div>
    <div class="datasort" data-order="1">1</div>
    <div class="datasort" data-order="3">3</div>
</div>

当我将此行输入控制台时：

getSorted('.datasort', 'data-order')

我得到这个结果：

[ <div class=​"datasort" data-order=​"1">1</div>, <div class=​"datasort" data-order=​"2">2​</div>, <div class=​"datasort" data-order=​"3">​3​</div>​, <div class=​"datasort" data-order=​"4">​4​</div>​]

[1,2​, ​3.​​, ​4.​​]

问题是，如何将此结果转换为实际的HTML，以替换现有的HTML

var $sordedElemets = getSorted('.datasort', 'data-order');

$("#divtosort").append( $sordedElemets );

---

尝试将

getSorted（'.datasort'，'data order'）

的结果存储在变量中 然后用Id

divtosort

清空div，然后将

sortedList

追加到div

代码看起来有点像这样-

var sortedList=getSorted（'.datasort'，'data order'）；

$（'#divtosort'）.empty（）；

$（'divtosort'）.append（sortedList）；

问题是，如何将此结果转换为实际的HTML，以替换现有的HTML

var $sordedElemets = getSorted('.datasort', 'data-order');

$("#divtosort").append( $sordedElemets );

您已经有了。在本例中，我使用jQuery的函数，该函数将替换调用它的节点的HTML内容：

函数getSorted（选择器，attrName）{
返回$（$（选择器）.toArray（）.sort（函数a，b）{
var aVal=parseInt（a.getAttribute（attrName）），
bVal=parseInt（b.getAttribute（attrName））；
返回aVal-bVal；
}));
}
var sorted=getSorted（'.datasort'，'data order'）；
$（'#divtosort'）.html（已排序）；

2.
4.
1.
3.

HTML

a.data（'order'）

应该比

a.getAttribute（attrName）

好。任何HTML数据都可以通过

.innerHTML

添加到当前渲染中。这就是它的工作原理：或者您可以使用

append

@JaxCze jQuery比因为。。。？

<div id="divtosort">
    <div class="datasort" data-order="2">2</div>
    <div class="datasort" data-order="4">4</div>
    <div class="datasort" data-order="1">1</div>
    <div class="datasort" data-order="3">3</div>
</div>

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}

$(document).ready(function() {
    $("#divtosort").html(getSorted('.datasort', 'data-order'));
});