javascript - 如何动态更改链接顺序

我有这样的事情：

<div class="list-group list">
    <a href="blabla" id="1" data-order="1">Hello</a>
    <a href="blabld" id="2" data-order="2">World</a>
</div>

不，我尝试使用纯Javascript动态更改链接的顺序。

有人有任何建议吗？

我的目标是：

<div class="list-group list">
    <a href="blabld" id="2" data-order="1">World</a>
    <a href="blabla" id="1" data-order="2">Hello</a>
</div>

最佳答案

干得好：

function sort(r) {
    var $list = document.getElementsByClassName('list')[0];
    var listGroupA = document.getElementsByTagName('a');
    var $listGroupA = [];
    for (var i = 0; i < listGroupA.length; ++i) {
        $listGroupA.push(listGroupA[i]);
    }
    $listGroupA.sort(function (a, b) {

        return r * (a.getAttribute('data-order') - b.getAttribute('data-order'));

    });
    for (var i = 0; i < $listGroupA.length; i++) {
        $list.removeChild($listGroupA[i]);
    }
    for (var i = 0; i < $listGroupA.length; i++) {
        $list.appendChild($listGroupA[i]);
    }
}
var reverse = 1;
$('#sort').click(function () {

    reverse = reverse * -1;
    sort(reverse);
});

还有fiddle