Neste script que estou escrevendo, me pego usando .parent () até sete vezes seguidas para obter elementos. Enquanto isso funciona, parece que poderia / deveria haver uma maneira mais fácil de fazer isso / função que eu não conheço. Alguma idéia além de classes / ids mais específicos em mais elementos?

Basicamente, minha pergunta se resume a acessar o div com idouter quando eu tenho uma referência ao span com id 'innerSpan' no html abaixo:

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

Então, atualmente, eu faria algo assim:

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

e isso fica louco com elementos profundamente aninhados.

Outro exemplo:

Aqui meu 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>

e meu roteiro. Eu escrevi uma função e preciso passar os ids das linhas principais, bem como as tabelas secundárias id para que eu possa adicionar dinamicamente mais linhas. Você realmente não precisa dessa função para essa pergunta, mas basicamente eu recebo esses ids assim:

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

obrigado

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

clique no adicionar outro para disparar o evento