Sorting Divs in jQuery by Custom Sort Order

Question

I\'m trying to re-sort the child elements of the tag input by comparing their category attribute to the category order in the Javascript variable category_sor

Answer 1

Here is how to do it. I used this SO question as a reference.

I tested this code and it works properly for your example:

$(document).ready(function() {
    var categories = new Array();
    var content = new Array();
    //Get Divs
    $('#input > [category]').each(function(i) {
        //Add to local array
        categories[i] = $(this).attr('category');
        content[i] = $(this).html();
    });

    $('#input').empty();

    //Sort Divs
    var category_sort_order = ['any', 'product', 'download'];
    for(i = 0; i < category_sort_order.length; i++) {
        //Grab all divs in this category and add them back to the form
        for(j = 0; j < categories.length; j++) {
            if(categories[j] == category_sort_order[i]) {
                $('#input').append('
' 
                           + content[j] + '
');
            }
        };
    }
});

How it works

First of all, this code requires the JQuery library. If you're not currently using it, I highly recommend it.

The code starts by getting all the child divs of the input div that contain a category attribute. Then it saves their html content and their category to two separate arrays (but in the same location.

Next it clears out all the divs under the input div.

Finally, it goes through your categories in the order you specify in the array and appends the matching child divs in the correct order.

The For loop section

@eyelidlessness does a good job of explaining for loops, but I'll also take a whack at it. in the context of this code.

The first line:

for(i = 0; i < category_sort_order.length; i++) {

Means that the code which follows (everything within the curly brackets { code }) will be repeated a number of times. Though the format looks archaic (and sorta is) it says:

1. Create a number variable called i and set it equal to zero
2. If that variable is less than the number of items in the category_sort_order array, then do whats in the brackets
3. When the brackets finish, add one to the variable i (i++ means add one)
4. Then it repeats step two and three until i is finally bigger than the number of categories in that array.

A.K.A whatever is in the brackets will be run once for every category.

Moving on... for each category, another loop is called. This one:

for(j = 0; j < categories.length; j++) {

loops through all of the categories of the divs that we just deleted from the screen.

Within this loop, the if statement checks if any of the divs from the screen match the current category. If so, they are appending, if not the loop continues searching till it goes through every div.