Question

我有以下标记;

<tbody>
        <tr>
            <td class="expand">Showroom area - New Display Zone</td>
            <td>300</td>
            <td>350</td>
            <td class="shortfall">50</td>
        </tr>
        <tr class="hidden">
            <td>Core Display</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>R8</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>Highlight Car</td>
            <td>1</td>
            <td>1</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="expand">Showroom - Handover Bay</td>
            <td>300</td>
            <td>350</td>
            <td class="shortfall">50</td>
        </tr>
        <tr class="hidden">
            <td>Core Display</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>R8</td>
            <td>0</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr class="hidden">
            <td>Highlight Car</td>
            <td>1</td>
            <td>1</td>
            <td>0</td>
        </tr>

和jQuery：

$(function () {

    $('td.expand').click(function () {

        $(this).parents().siblings('tr.hidden').toggle();
        $(this).toggleClass("active");
    });
});

我希望此代码将前3个tr.hidden类切换为直接与第一个td.expand类相关联，但运行代码会切换所有要显示的tr.hidden类。

谁能看到我在这里做错了什么？

Answer 1

基本上，你所犯的错误并不是告诉jQuery你只想处理 {/ 1}}元素的。您还使用tr.hidden（复数），您几乎肯定需要parents（单数）。

您可以使用parent收集元素，直到条件匹配为止。在这种情况下，您可以使用nextUntil收集行，直到找到不是nextUntil的行。所以：

tr.hidden

Live example | source

或者 - 这将是我首选的解决方案 - 您可以考虑稍微更改一下您的结构，并使用多个$(this).parent().nextUntil(':not(tr.hidden)').toggle();元素，每个元素对应一个展开/折叠组：

tbody

这显然简化了事情：

<tbody> <tr> <td class="expand">...</td> ... </tr> <tr class="hidden"> ... </tr> ... </tbody> <tbody> <tr> <td class="expand">...</td> ... </tr> <tr class="hidden"> ... </tr> ... </tbody>

Live example | source

Answer 2

您想使用parent()而不是parents()

jQuery这不适用于我的代码

2 个答案: