javascript - 如何获取已使用此功能排序的 div 的 HTML？

Question

这是我需要排序的 HTML div:

<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>

我正在使用这个函数对 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;
    }));
}

当我在控制台中输入这一行时:

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>​]

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

Answer 1

The question is, how do I turn this result into actual HTML that I can replace the existing HTML with?

你已经有了。在这个例子中，我使用 jQuery 的 .html将替换调用它的节点的 HTML 内容的函数:

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;
    }));
}


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

$('#divtosort').html(sorted);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>