Более эффективный способ сделать parent(). Parent(). Parent() и т.д. В jquery

В этом script, я пишу, я нахожу, что использую .parent() до семи раз подряд, чтобы получить элементы. Хотя это работает, кажется, что может быть/должен быть более простой способ сделать это/функцию, о которой я не знаю. Любые идеи, кроме более конкретных классов/идентификаторов для большего количества элементов?

В основном, мой вопрос сводится к доступу к div с id outer, когда у меня есть ссылка на span с id 'innerSpan' в html ниже:

<div id='outer'>
    <a href="some_url">
        <span id="inner">bla bla</span>
    </a>
</div>

Итак, в настоящее время я бы сделал что-то вроде этого:

var outer = $('#inner').parent().parent()

и это сходит с ума от глубоко вложенных элементов.

Другой пример:

Вот мой html:

<div id="options_right">
            <table id="product_options_list" class="table table-bordered">

            <tbody id="1">
                <tr>
                    <td>
                        <select name="option_1_val[0]" class="option_table_select">
                            <option value="Red">Red</option>
                            <option value="Blue">Blue</option>
                            <option value="Green">Green</option>
                            </select>
                    </td>
                    <td>
                        <table class="table sub_options" id="0">
                            <tbody>
                            <tr>
                                <td>
                                    <select name="option_1_sub[0][]" class="option_table_select  sub_option_select">
                                        <option value="">None</option>
                                        <option value="2">Size</option>
                                    </select>
                                    <div class="sub_option_value_holder">
                                        <select name="option_1_sub_val[0][]" class="sub_option_values" style="display:none;"></select>
                                    </div>
                                </td>
                                <td>
                                    <a href="#" class="remove_sub_option btn btn-primary">Remove</a>
                                </td>
                                <td>
                                    <a href="#" class="add_sub_option btn btn-primary">Add Another</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>

и script. я написал функцию и должен передать ей идентификаторы основных строк tbody, а также идентификатор вторичных таблиц, чтобы я мог динамически добавлять больше строк. Вам действительно не нужна эта функция для этого вопроса, но в основном я получаю эти идентификаторы так:

get_suboption_row($(this).parent().parent().parent().parent().parent().parent().parent().attr('id'), $(this).parent().parent().parent().parent().attr('id'));

спасибо

jsFiddle: http://jsfiddle.net/Hg4rf/

нажмите кнопку "Добавить еще одно" для запуска события

Ответы

Ответ 1

У вас есть 2 вложенных таблицы,
чтобы получить то, что вы хотите, вы можете использовать эти два метода обхода DOM .closest() или .parents():

$(this).closest('table').closest('tbody').attr('id');

$(this).parents('table').parents('tbody').attr('id');

jsFiddle demo

_{http://api.jquery.com/closest
http://api.jquery.com/parents}

_{И сразу после второго взгляда: числовые ID действительны только в HTML5.}

Ответ 2

Я думаю, . closeest() - это то, что вы ищете:)

Ответ 3

Если вы знаете CSS Class name для этого элемента, вы можете вызвать метод closest()

var thatParent=  $("#someId").closest(".somCSSClassName")

Итак, ваш код будет переписан как

get_suboption_row($(this).closest("someClass").attr('id'),
                $(this).closest("someOtherClass").attr('id'));

EDIT: после просмотра вашего JSfiddle

Используйте имя класса, чтобы получить родительскую таблицу.

 alert($(this).closest('tbody').closest('.table-bordered').attr('id'));

Рабочий пример: http://jsfiddle.net/Hg4rf/2/