jquery - 如何将 TR 与同一个班级分组？

Question

我有一个表结构。我想将第一个子 TD 中具有相同内容的所有 TR 放在一起，并在组之前添加 TR。所以，我试图用相同的内容对 TR 进行分组。

我的结构是

    <tbody>
         <tr>
              <td class="groupBy">www.bing.com</td>
              <td>2</td>
         </tr>
         <tr>
              <td class="groupBy">www.google.com</td>
              <td>5</td>
         </tr>
          <tr>
              <td class="groupBy">www.bing.com</td>
              <td>2</td>
         </tr>
          <tr>
              <td class="groupBy">www.yahoo.com</td>
              <td>8</td>
         </tr>
          <tr>
              <td class="groupBy">www.google.com</td>
              <td>8</td>
         </tr>
         <tr>
              <td class="groupBy">www.bing.com</td>
              <td>2</td>
         </tr>
    </tbody>

我想在jquery之后输出下面

    <tbody> 
            <tr>
                <p>www.bing.com</p>
            </tr>
             <tr>
                  <td class="groupBy">www.bing.com</td>
                  <td>2</td>
             </tr>
             <tr>
                  <td class="groupBy">www.bing.com</td>
                  <td>2</td>
             </tr>
             <tr>
                  <td class="groupBy">www.bing.com</td>
                  <td>2</td>
             </tr>
             <tr>
                <p>www.google.com</p>
            </tr>
             <tr>
                  <td class="groupBy">www.google.com</td>
                  <td>5</td>
             </tr>
              <tr>
                  <td class="groupBy">www.google.com</td>
                  <td>5</td>
             </tr>
             <tr>
                <p>www.yahoo.com</p>
            </tr>
              <tr>
                  <td class="groupBy">www.yahoo.com</td>
                  <td>8</td>
             </tr>
</tbody>

有人可以帮我解决这个问题吗？

Answer 1

您所描述的是对元素进行排序而不是对它们进行分组，这是一个肮脏的解决方案：

var arr = [], s = [];

$('tr').sort(function(a, b){
   return $(a).text() > $(b).text(); 
}).each(function(i, v){
    var t = $('td:first', v).text();
    if ( arr.indexOf(t) === -1) {
       arr.push(t);
       s.push(v);
    }
}).appendTo('tbody').filter(s).before(function(){
    return '<tr class="header"><td><p>' +  $('td:first', this).text() +  '</p></td></tr>';
});

http://jsfiddle.net/SD8at/