Sorting parent div by content in child div

Question

I am trying to sort the elements inside conainer using jquery, I have used this fiddle as a reference http://jsfiddle.net/tc5dc/ . I dont know what is possibly wrong ??

Also if there is any other way i can get this done in a more simple and DRY way.

                    <div class="container"><!--Container-->
                    <div class="element"><!--Single element-->
                        <div class="child1">                                
                        </div>
                        <div class="child2">
                            <div class="stats right">
                                <div class="stat">
                                    <h1 class="inv">0</h1>
                                    <h4 id ="mInv"class="sort" >Inv</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="con">14</h1>
                                    <h4 id="mCon" class="sort" >Con</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="ts">66</h1>
                                    <h4 id="mTs" class="sort" >TS</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="element"><!--Single element-->
                        <div class="child1">                                
                        </div>
                        <div class="child2">
                            <div class="stats right">
                                <div class="stat">
                                    <h1 class="inv">10</h1>
                                    <h4 id ="mInv"class="sort" >Inv</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="con">12</h1>
                                    <h4 id="mCon" class="sort" >Con</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="ts">90</h1>
                                    <h4 id="mTs" class="sort" >TS</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="element"><!--Single element-->
                        <div class="child1">                                
                        </div>
                        <div class="child2">
                            <div class="stats right">
                                <div class="stat">
                                    <h1 class="inv">17</h1>
                                    <h4 id ="mInv"class="sort" >Inv</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="con">81</h1>
                                    <h4 id="mCon" class="sort" >Con</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="ts">124</h1>
                                    <h4 id="mTs" class="sort" >TS</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

JS

function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
    var vA = $(keySelector, a).text();
    var vB = $(keySelector, b).text();
    return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}

/* setup sort attributes */
$('#mInv').data("sortKey", "h1.inv");
$('#mCon').data("sortKey", "h1.con");
$('#mTs').data("sortKey", "h1.ts");


/* sort on button click */
$("h4.sort").click(function() {
sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"));

Answer 1

One of the problems you'll have immediately is that with trying to sort .element by children is that the H1 tags are not children of .element

<div class="element"><!--Single element-->
                    <div class="child1">                                
                    </div>
                    <div class="child2">
                        <div class="stats right">
                            <div class="stat">
                                <h1></h1>
                                <h4></h4>
                            </div>
                            <div class="stat">
                                <h1></h1>
                                <h4></h4>
                            </div>
                            <div class="stat">
                                <h1></h1>
                                <h4></h4>
                            </div>
                        </div>
                    </div>
                </div>

Looking at this element .child1 has no children, .child2 has 1 child and that is .stats the div with 2 classes .stats and .right has 3 children divs and those divs each have child h1 and h4 tags

var items = parent.children(childSelector).sort(function(a, b)

only attempts to sort 1 layer down

If you want to keep all the nesting one simple way to fix it would be to use .find instead of .children

EDIT: Fiddle that shows another way of doing sort, this time with data nested inside the children of the children you're trying to sort; probably not that great but it works and gives you an idea of possible implementations (ie there is room for improvement there) http://jsfiddle.net/tc5dc/702/

Fiddle code:

<div class="container">
<div class="element">
    <div class="stat">
         <h1 class="inv">0</h1>
         <h4 id="mInv" class="sort">Inv</h4>
    </div>
    <div class="stat">
         <h1 class="ts">66</h1>
         <h4 id="mTs" class="sort">TS</h4>
    </div>
    <div class="stat">
         <h1 class="con">14</h1>
         <h4 id="mCon" class="sort">Con</h4>
    </div>
</div>

$("div.stat").click(function () {
        var list = $(".element").children("div");
        list.sort(sortDesc);
        $(".container").html("");
        $(".container").append(list);
    });

    function sortDesc(a, b) {
        var test1 = jQuery(a);
        var test2 = jQuery(b);
        return test1.find("h1").text() > test2.find("h1").text();
    }