排序父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班.stats and .right有3個孩子的div 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(); 
    }