如何按 element.name 对 javascript 对象数组进行排序

Question

我正在尝试使用 javascript 和原型编写一些验证脚本。

我想要做的是遍历表单的所有元素并验证每个答案。我的代码有效，但 DOM 元素数组未排序。我想按元素的 ID 对元素进行排序。

这是我的代码，如果我注释掉 elem.sort(zelementsort); 就可以正常工作

function zelementsort(a,b) {
    if (a.name > b.name)
        return -1;
    else if (b.name > a.name)
        return 1;
    else 
        return 0;
}   

var elem = document.getElementById('myform').elements;
elem.sort(zelementsort);

for(var i = 0; i < elem.length; i++)
{
     alert("Name = " + elem[i].name);

}

我想知道问题是否可能是某些元素没有名称。任何人都有另一种更简单的方法来按 .name 对 DOM 元素数组进行排序？

Answer 1

基于原生jssort函数实现不带if。

elements.sort(function(a, b) { return 2 * (a.name > b.name) - 1; })

Answer 2

这是因为sort() 不是您使用.elements 检索的DomElementList 的方法。

好消息是您可以使用 Javascript 技巧将 Array.sort 方法应用于您的 DomElementList。

然后，您只需在 DOM 中再次附加节点，它们不会被复制而是移动。

var myform = document.getElementById('myform'),
    elem = myform.elements;

// call the Array.sort() method on our DomElementList
Array.prototype.sort.call(elem, function()
{
    if (a.name > b.name)
        return -1;
    else if (b.name > a.name)
        return 1;
    else 
        return 0;
});

for(var i = 0; i < elem.length; i++)
{
     myform.appendChild(elem[i]);
}

Answer 3

应该这样做：

$$('#myForm *[name]').sortBy(function(el){ return el.name; });