Table Row Traversing with 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