1

我使用以下代码选择 element1(Selected Table row 1) 和 element2(Selected Table row 2) 之间的所有元素（表行），但它给出了表的所有行，而不是以下两行之间的唯一行。

 $("img[alt='Expand']").bind("click", function () {
      var elementUntil1 = $(this).parent().parent().parent();
      var elementUntil2 = elementUntil1.nextAll("tr.SubClassRow:first")
      var betweenElement = $(elementUntil1[0]).nextUntil(elementUntil[0]).andSelf();

});


   <table>
    <tbody>
        <tr class="SubClassRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="Expand" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="SubClassRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="Expand" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="SubClassRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="Expand" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
4

1 回答 1

2

我建议：

$('img[alt="Expand"]').click(function () {
    var rowsBetween = $(this).closest('tr').nextUntil('.subClassRow').filter(':not(".SubClassRow")');
    // use like so:
    rowsBetween.css('visibility', function (i, v) {
        console.log(this, v);
        return v == 'collapse' ? 'visible' : 'collapse';
    }).find('td').toggle();
});

JS 小提琴演示。

参考：

于 2013-09-03T13:11:10.943 回答