Как сгруппировать строки с одинаковыми клетками в JQuery?

Question

Извините за корректирующий вопрос, но по какой-то причине я не могу обернуть мой мозг вокруг этого.

У меня есть группа строк по 3 ячейки в каждой. С помощью Jquery мне нужно

1. отфильтровывает все строки, у которых номер ячейки 3 не равен переменной "large" в этом случае
2. сгруппировать оставшиеся строки по значению 2-й ячейки (цвет)
3. добавить заголовок группы со значением цвета (черный, белый, красный и т. Д.)
4. любые пустые группы не должны отображаться

Проще взглянуть на мой пример ...

var dogSize = "large";

показывать только крупных собак, сгруппированных по цвету с заголовком. если в заголовке нет элементов, не показывать его.

<tr class="dogs">
    <td class="name">Mindy</td>  <td class="color">black</td>    <td class="size">big</td> </tr>
<tr class="dogs">
    <td class="name">Mandy</td>  <td class="color">black</td>    <td class="size">little</td></tr>
<tr class="dogs">
    <td class="name">Tina</td>  <td class="color">spotted</td>    <td class="size">medium</td></tr>
<tr class="dogs">
    <td class="name">Sandy</td>  <td class="color">brown</td>    <td class="size">big</td></tr>
<tr class="dogs">
    <td class="name">Harry</td>  <td class="color">brown</td>    <td class="size">little</td></tr>
<tr class="dogs">
    <td class="name">Sam</td>  <td class="color">brown</td>    <td class="size">medium</td></tr>
<tr class="dogs">
    <td class="name">Larry</td>  <td class="color">white</td>    <td class="size">big</td></tr>
<tr class="dogs">
    <td class="name">Chico</td>  <td class="color">black</td>    <td class="size">small</td></tr>

Обычно я бился головой об этом, пока не понял, но в этот момент я борюсь и не знаю, как этого добиться. Большое спасибо за помощь!

Answer 1

ОБНОВЛЕНО

Вы можете использовать псевдоселектор :contains(), чтобы выбрать только строки определенного размера, и вы можете использовать .sort(), чтобы отсортировать строки таблицы в новом порядке:

var dogSize = 'medium',
    $table  = $('table'),
    $TRs    = $table.find('tr');

$TRs.filter(function () {
    return ($(this).children('.size').text() != dogSize);
}).hide();

var arr = $TRs.sort(function (a, b) {
    var aText = $(a).children('.color').text(),
        bText = $(b).children('.color').text();
    if (aText > bText) {
        return 1;
    } else if (aText < bText) {
        return -1;
    }
    return 0;
});
$table.empty().append(arr);

Вот демоверсия: http://jsfiddle.net/C399w/2/