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?

haim770 · Accepted Answer · 2014-10-29 18:11:31Z

2

Use nextUntil():

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

See Documentation

answered Oct 29, 2014 at 18:11

haim770

49.2k7 gold badges113 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Xenyal Over a year ago

Perfect, this will do. Didn't know of .nextUntil method. Thanks!

Xenyal Over a year ago

I ended up using something like $(item).nextUntil(".node, .subnode").toggleClass("descDisplay").

haim770 Over a year ago

.nextUntil('tr.node') will do in this case.

Collectives™ on Stack Overflow

Table Row Traversing with JavaScript jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related