Question

I have a bunch of nested checkboxes. I would like to make a selection of all checkboxes and have the ‘deepest’ elements first in that collection. Consider the following html:

<div id="selection"></div>
<div>
    <label>A: <input id="a" type="checkbox" /></label><br/>
    <div>
        <label>B: <input id="b" type="checkbox" /></label><br/>
        <label>C: <input id="c" type="checkbox" /></label><br/>
    </div>
    <label>D: <input id="d" type="checkbox" /></label><br/>
    <label>E: <input id="e" type="checkbox" /></label><br/>
    <div>
        <label>F: <input id="f" type="checkbox" /></label><br/>
        <label>G: <input id="g" type="checkbox" /></label><br/>
        <div>
            <label>H: <input id="h" type="checkbox" /></label><br/>
            <label>I: <input id="i" type="checkbox" /></label><br/> 
        </div>
    </div>
    <label>J: <input id="j" type="checkbox" /></label><br/>
</div>

I’m using some jQuery to print the selection order:

var x = '';

$('input').each(function(){
    x += $(this).attr('id') + ' - ';
});

$('#selection').text(x.substr(0, x.length - 3)); 

The result is: a - b - c - d - e - f - g - h - i - j.

I would like the order or the selected elements to be I, H, G, F, C, B, J, E, D, A or H, I, B, C, F, G, A, D, E, J. How can I reorder the selection to be compatible with what I want? Or is their a way to make the initial selection the way I want?

Ow… and for all you fiddlers out there: http://jsfiddle.net/hze3M/4/! Go nuts! 😀

Answer 1

var x = '';
var ar = [];
$('input').each(function(){
    ar.push({length: $(this).parents().length, elmt: $(this)});
});

ar.sort(function(a,b) {
    if (a.length - b.length > 0) {
        return -1;
    }

    if (a.length - b.length < 0) {
        return 1;
    }

    return 0;
});

for (var i=0; i<ar.length; i++) {
    x += (ar[i].elmt.attr("id")) + ' - ';
};    

$('#selection').text(x);

Jsfiddle: http://jsfiddle.net/hze3M/7/

EDIT:

here another solution:

$.fn.sortByDepth = function() {
    var ar = this.map(function() {
            return {length: $(this).parents().length, elt: this}
        }).get(),
        result = [],
        i = ar.length;


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

    while (i--) {
        result.push(ar[i].elt);
    }
    return $(result);
};


var x = $('input').sortByDepth().map(function() {
    return this.id;
}).get().join(' - ');

$('#selection').text(x);

Credits here : Create a jQuery object collection from separate jQuery objects