Добавить к самому внешнему элементу, подобранному селектором

Question

В моем документе есть таблица, которая может содержать или не содержать несколько вложенных таблиц.Каждая таблица (внешняя и внутренняя) может содержать теги tbody.Я хочу соответствовать самому внешнему тегу tbody.

Ниже приведен пример документа:

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

В этом случае у меня есть селектор JQuery, выбирающий крайнюю таблицу.Я хочу выбрать элемент tbody, связанный с этой таблицей, но ни один из элементов tbody внутри вложенных таблиц.

Мой оригинальный селектор был просто:

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

И это неработать по понятным причинам.Спасибо за помощь!

Answer 1

Вы можете использовать дочерний селектор для достижения этого:

$("#shippingContainer > tbody");

Это будет соответствовать элементу <tbody>, который является прямым дочерним элементом вашей таблицы.

Answer 2

Вы также можете сделать это:

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

Answer 3

Используйте <a href="http://api.jquery.com/children/" rel="nofollow">children</a> вместо <a href="http://api.jquery.com/find/" rel="nofollow">find</a>.

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

Answer 4

Вы можете использовать дочерний селектор, как показано ниже:

Это выберет первый элемент tbody в вашей таблице shippingContainer:

//This will select the first tbody element (of your main table)
$("#shippingContainer > tbody")

Это выберет вложенный элемент tbody в вашей основной таблице:

//This will select the tbody element within the table (the inner table)
$("#shippingContainer").find('table > tbody')

Подробнее о дочерних селекторах здесь