CODEWITHSUNDEEP
javascriptarraysdomsortingprototypejs
jeph perro
jeph perro

Reputation: 6422

How to sort javascript object array by element.name

I am try to write some validation script using javascript and prototype.

What I want to do is to loop through all the elements of a form and validate each answer. My code works, BUT the array of DOM elements is unsorted. I would like to sort the elements by their ID.

Here is the my code, which works fine if I comment-out 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);

}

I wonder if the problem might be that some of the elements do not have names. Anyone have another simpler way of sorting an array of DOM elements by their .name?

Upvotes: 3

Views: 7532

Answers (3)

user854301
user854301

Reputation: 5493

Implementation without if based on native js sort function.

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

Upvotes: 1

Vincent Robert
Vincent Robert

Reputation: 36130

This is because sort() is not a method of the DomElementList you retrieve with .elements.

The nice thing is that you can apply the Array.sort method to your DomElementList using a Javascript trick.

Then, you just have to append the nodes again in the DOM, they won't be duplicated but moved.

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

Upvotes: 1

kangax
kangax

Reputation: 39168

This should do it:

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

Upvotes: 3

Related Questions