按子div中的內容對父div進行排序

Question

我正在嘗試使用jquery對conainer內部的元素進行排序，我已將此提琴用作參考http://jsfiddle.net/tc5dc/ 。 我不知道可能是什么錯誤？

另外，如果還有其他方法，我可以以更簡單，更干燥的方式完成。

                    <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

您將立即遇到的問題之一是，嘗試按子項對.element進行排序是因為H1標簽不是.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>

看這個元素.child1沒有孩子， .child2有1個孩子，也就是.stats有2個類的div .stats and .right有3個孩子div，而每個div都有孩子h1和h4標簽

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

僅嘗試向下排序1層

如果你想保留所有的嵌套一個簡單的方法來解決它是使用.find代替.children

編輯：小提琴展示了另一種進行排序的方式，這次數據嵌套在您要排序的子級的子級中； 可能不是很好，但是它可以工作，並且為您提供了可能的實現方式（即那里還有改進的空間） http://jsfiddle.net/tc5dc/702/

小提琴代碼：

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