javascript - 使用 jquery 对不在 HTML 表中的元素进行排序

Question

我有一组像表格一样显示的 DIV，但不在 HTML 表格中。 结构是这样的:

   <div id="queryResult" style="display: block;">
   <div class="rRow">
      <div class="rCell4">Job</div>
      <div class="rCell4">Company</div>
      <div class="rCell4">Customer</div>
      <div class="rCell4">Product</div>
      <div class="rCell4">Balance</div>
   </div>
   <div class="rRow">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">XYZ co</div>
      <div class="rCell4">39.100</div>
      <div class="rCell4">26.48550</div>
   </div>
   <div class="rRow">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">MNOP co</div>
      <div class="rCell4">39.100</div>
      <div class="rCell4">26.48550</div>
   </div>   
   <div class="clr"></div>
</div>

显示时，它看起来像这样:

所以我想要的是能够通过单击列标题或其他内容对列进行排序。我知道有像 sorttable 这样的 jQuery/JavaScript 库，但我发现的所有库都需要 HTML 表格。

我是否硬着头皮将其切换到 table 上，还是有其他合理(更简单)的解决方案？

Answer 1

这里有一个解决方案。我在您的 html 中添加了一些类以进行更多控制。

HTML:

<div id="queryResult" style="display: block;">
   <div class="rRow header">
      <div class="rCell4">Job</div>
      <div class="rCell4">Company</div>
      <div class="rCell4">Customer</div>
      <div class="rCell4">Product</div>
      <div class="rCell4">Balance</div>
   </div>
   <div class="rRow body">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">VDry Transload</div>
      <div class="rCell4">XYZ co</div>
      <div class="rCell4">38.100</div>
      <div class="rCell4">18.48550</div>
   </div>
   <div class="rRow body">
      <div class="rCell4 editMe">46623</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">MNOP co</div>
      <div class="rCell4">31.100</div>
      <div class="rCell4">29.48550</div>
   </div>
  <div class="rRow body">
      <div class="rCell4 editMe">46145</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">ADry Transload</div>
      <div class="rCell4">JKH co</div>
      <div class="rCell4">42.100</div>
      <div class="rCell4">16.48550</div>
   </div>
   <div class="clr"></div>
</div>

这是一个用于排序的 jQuery:

jQuery:

$('.header').children('.rCell4').each(function(index){
  $(this).click(function(){
    var container = $('#queryResult');
    var header = $('.header');
    var cmpCols = [];
    $('.body').each(function(){
      cmpCols.push($(this).children('.rCell4').eq(index));
    });
    for(i=0; i<cmpCols.length-1; i++){
      for(j=i; j<cmpCols.length; j++){
        if(cmpCols[i].text() > cmpCols[j].text()){
          var tmp = cmpCols[i];
          cmpCols[i] = cmpCols[j];
          cmpCols[j] = tmp;
        }
      }
    }
    container.html(header);
    for(i=0; i<cmpCols.length; i++){
      container.append(cmpCols[i].parent());
    }
  });
});

Working jsFiddle Example.