根據各列對嵌套元素進行排序

Question

我不確定這是否可行。我似乎無法開始，但我有以下HTML。是否可以點擊標題（第1列，第2列或第3列）並讓bodyModule中的所有內容都被排序？

<div class="moduleRowTitle"> 
    <div class="column1">Column 1</div> 
    <div class="column2">Column 2</div> 
    <div class="column3">Column 3</div> 
</div> 
<div class="bodyModule"> 
    <div class="row"> 
     <div class="column1">AAAAA</div> 
     <div class="column2">BBBBB</div> 
     <div class="column3">CCCCC</div> 
    </div> 
    <div class="row"> 
     <div class="column1">BBBBB</div> 
     <div class="column2">AAAAA</div> 
     <div class="column3">CCCCC</div> 
    </div> 
    <div class="row"> 
     <div class="column1">BBBBB</div> 
     <div class="column2">CCCCC</div> 
     <div class="column3">AAAAA</div> 
    </div> 
</div> 

點擊COLUMN2應排序如下所示：

<div class="row"> 
     <div class="column1">BBBBB</div> 
     <div class="column2">AAAAA</div> 
     <div class="column3">CCCCC</div> 
    </div> 
    <div class="row"> 
     <div class="column1">AAAAA</div> 
     <div class="column2">BBBBB</div> 
     <div class="column3">CCCCC</div> 
    </div> 
    <div class="row"> 
     <div class="column1">BBBBB</div> 
     <div class="column2">CCCCC</div> 
     <div class="column3">AAAAA</div> 
    </div> 

Answer 1

演示FIDDLE

jQuery的

 $(document).ready(function(){ 
$('.moduleRowTitle div').click(function(){ 
    var vals = []; 
    var className=$(this).attr('class'); 
    $(".bodyModule ."+className).each(function(){ 
      vals.push($(this).html()); 
    }); 
      vals.sort(); 
    var i=0; 
    $(".bodyModule ."+className).each(function(){ 
      $(this).html(vals[i]); 
      i=i+1; 
    }); 
}); 
}); 

我希望這是你的期望