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