Сортировка вложенных элементов на основе различных столбцов

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

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

Я надеюсь, что это то, что вы ожидаете