Question

I have a table in my document, which may or may not contain multiple nested tables. Each table (both outer and possible inner) contain tbody tags. I want to match the outermost tbody tag.

Below is a sample document:

<table id="shippingContainer">
    <thead>
    </thead>
    <tbody>
        <tr>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tbody>
                    </tbody>
                </table>
            </td>
        </tr>
</table>

In this case I have JQuery selector selecting the outermost table. I want to select the tbody element associated with that table, but not any of the tbody elements inside the nested tables.

My original selector was simply:

$("#shippingContainer").find("tbody");

And this doesn’t work for obvious reasons. Thanks for the help!

Answer 1

You can use a child selector to achieve that:

$("#shippingContainer > tbody");

This will match the <tbody> element that’s a direct child of your table.