Question

对于补救问题感到抱歉，但由于某些原因，我无法围绕这个问题。

我有一组行，每行有3个单元格。使用Jquery我需要

过滤掉所有没有单元格编号3的行，在这种情况下等于变量“large”
将剩余行按第二个单元格（颜色）的值分组
添加一个包含颜色值（黑色，白色，红色等）
不应显示任何空白组

更容易看看我的例子......

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/

如何在jquery中对具有相同单元格的行进行分组？

1 个答案: