使用JavaScript对HTML属性进行排序

Question

如何使用JavaScript对HTML属性进行排序？

我有这个HTML:

<table>
    <tbody>
        <tr>
            <td>Cell 0,0</td>
            <td>Cell 1,0</td>
            <td>Cell 2,0</td>
        </tr>
        <tr>
            <td>Cell 0,1</td>
            <td rowspan="2" colspan="2">Cell 1,1
                <br>Cell 2,1
                <br>Cell 1,2
                <br>Cell 2,2</td>
        </tr>
        <tr>
            <td>Cell 0,2</td>
        </tr>
    </tbody>
</table>

我想将所有元素中的所有属性按字母顺序排序.例如:

<td colspan="2" rowspan="2">Cell 1,1

sort函数可以基于HTML字符串,jQuery对象或节点(与哪个节点无关).

我需要这个的原因是因为我在两组HTML之间做了一个差异(使用JS,在浏览器中,在单元测试失败后),属性顺序使它失败.

所以我的问题是:

如何重新排序节点属性？或者如何重新排序HTML字符串中的属性？或者如何重新排序jQuery元素属性？

我还没有任何代码,因为我不确定哪种方法最好.

Answer 1

如果你真的必须......试试这个小提琴。
但我不得不说，我真的很好奇你为什么要这样做。

代码：

var elements = document.getElementsByTagName("*");
sortAttributes(elements);

//From: http://stackoverflow.com/questions/979256/how-to-sort-an-array-of-javascript-objects
function sortBy(field, reverse, primer) {
    var key = function(x) {
        return primer ? primer(x[field]) : x[field];
    };

    return function(a, b) {
        var A = key(a),
            B = key(b);
        return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1, 1][+ !! reverse];
    }
};

function sortAttributes(elements) {
    for (var j = 0; j < elements.length; j++) {
        var attributes = [];
        for (var i = 0; i < elements[j].attributes.length; i++) {
            attributes.push({
                'name': elements[j].attributes[i].name,
                'value': elements[j].attributes[i].value
            });
        }

        var sortedAttributes = attributes.sort(sortBy('name', true, function(a) {
            return a.toUpperCase();
        }));

        for (var i = 0; i < sortedAttributes.length; i++) {
            $(elements[j]).removeAttr(sortedAttributes[i]['name']);
        }

        for (var i = 0; i < sortedAttributes.length; i++) {
            $(elements[j]).attr(sortedAttributes[i]['name'], sortedAttributes[i]['value']);
        }
    }
}