使用JavaScript jQuery遍历表行

Question

I have a table formatted like that following:

<table>
    <tbody>
        <tr class="node">
            <td onclick='toggleDesc(this.parentNode);'>blah</td>
        </tr>
        <tr class="subnode">
            <td>sblah</td>
        </tr>
        <tr class="subnode">
            <td>sblah</td>
        </tr>
        <tr class="subnode">
            <td>sblah</td>
        </tr>
        <tr class="node">
            <td onclick='toggleDesc(this.parentNode);'>blah</td>
        </tr>
        <tr class="subnode">
            <td>sblah</td>
        </tr>
        <tr class="subnode">
            <td>sblah</td>
        </tr>
    </tbody>
</table>

I also have a function that toggles the display of the .subnode classes based on the TD of the .node above it. The function looks like this:

function toggleDesc(item) {
    var descRow = item.nextElementSibling;
    $(descRow).toggleClass("descDisplay");
}

However, the function above only toggles the display of the first .subnode it encounters. Does anyone know how to .toggleClass for each .subnode after .node until the next .node is hit?

Answer 1

Use nextUntil() :

$(item).nextUntil('tr.node').toggleClass("descDisplay");

See Documentation