I have a form with over 100 list items that I must reorder on submit. The following code works to reorder my list without any apparent problems in Firefox; however, IE prompts with the message "A script on this page is causing Internet Explorer to run slowly. If it continues to run, your puter may bee unresponsive. Do you want to abort the script?" If the user clicks 'No', the script will work as expected.

var listitems = $(form).find('li').get();
listitems.sort(function(a, b) {
    var pA = $(a).attr('id');
    var pB = $(b).attr('id');
    return (pA - pB);
});

Any ideas on how to make this more efficient?

I have a form with over 100 list items that I must reorder on submit. The following code works to reorder my list without any apparent problems in Firefox; however, IE prompts with the message "A script on this page is causing Internet Explorer to run slowly. If it continues to run, your puter may bee unresponsive. Do you want to abort the script?" If the user clicks 'No', the script will work as expected.

var listitems = $(form).find('li').get();
listitems.sort(function(a, b) {
    var pA = $(a).attr('id');
    var pB = $(b).attr('id');
    return (pA - pB);
});

Any ideas on how to make this more efficient?

• javascript
• jquery
• internet-explorer
• dom

Share Improve this question Follow asked May 26, 2010 at 5:46 JasonJason 9588 bronze badges 5

• 1 Can you do it on the server side? IE8 won't plain then. – Anthony Commented May 26, 2010 at 5:48
• Yea, I suppose I could if I have to. Not a bad idea though! Thanks. – Jason Commented May 26, 2010 at 5:56
• 1 Try caching the id attribute while you are sorting – Bishnu Commented May 26, 2010 at 6:36
• what do the id's represent - numbers? – Anurag Commented May 26, 2010 at 8:36
• Yes, the IDs are numeric, which I've realized is not proper. – Jason Commented May 26, 2010 at 19:29

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I didn't try it with 100 items but it totally worked with 2.

listitems.sort(function(a, b) {
    return (a.id - b.id);
});

Used a couple of different approaches and got interesting results for different browsers. Unfortunately, the one browser that's troubling as usual is the one I don't have access to. I would appreciate if anyone can remark on how these tests run on IE.

There was not much to be gained by removing the use of jQuery altogether on Chrome, but skipping jQuery had much better results on other browsers. Also, as the number of <li> elements increases, it helps to construct an array with just the id's and sort that. Once the sorting is done, the sorted ID's array can be used to get the nodes data in proper order using this array.

Sort an array of list items.

function sortListItems() {
    var listItems = $("li").get();

    listItems.sort(function(a, b) {
        return a.id - b.id;
    });
}

Sort an array of id's.

function sortIDs() {
    var listItems = $("li");
    var ids = [];
    for(var i = 0; i < listItems.length; i++) {
        ids.push(listItems[i].id);
    }

    ids.sort(function(a, b) {
        return a - b;
    });
}

See the results at http://jsfiddle/hwxmJ/4/. Safari crapped out for some reason at 1000 items, while others - Chrome, Opera, Firefox worked fine with 2000 elements.

Your code suggests that your IDs are numeric, which is not valid in HTML. You should change your design. Also, you can do this very simply and with better performance without jQuery.

The following assumes your IDs are of the form "li_x" where x is an integer. It isn't fully optimized since it calls the function to extract the numeric ID in every parison. You could instead cache the numeric IDs in advance if you need to improve performance, but I don't think it'll be bad enough to warrant it.

function getNumericId(li) {
    return li.id.split("_")[1];
}

var liList = form.getElementsByTagName("li");
var liArray = Array.prototype.slice.call(liList, 0);
liArray.sort(function(a, b) {
    return getNumericId(a) - getNumericId(b);
});

You can also break it into smaller chunks and give the browser 'control' periodically:

How can I give control back (briefly) to the browser during intensive JavaScript processing?