更有效的方法在jquery中执行parent().parent().parent()等

Question

在我写的这个脚本中,我发现自己连续七次使用.parent()来获取元素.虽然这有效,但似乎可以/应该是一种更简单的方法来实现这个/我不知道的功能.关于更多元素的更具体的类/ ids以外的任何想法？

基本上,outer当我在下面的html中引用id为'innerSpan'的span时,我的问题归结为访问带有id的div :

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

和我的剧本.我写了一个函数,需要传递主行tbody的id以及辅助表id,这样我就可以动态添加更多的行.你真的不需要这个问题的功能,但基本上我得到这样的ID:

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/

单击添加另一个以触发事件

Answer 1

你有2个嵌套表,
以获得你想要的东西你可以使用这两个DOM遍历方法 .closest()或.parents()

• .closest() 向上移动DOM树,直到找到所提供选择器的匹配项
• .parents()将DOM树移动到文档的根元素,将每个祖先元素添加到临时集合中; 然后,如果提供了一个选择器,它会根据选择器过滤该集合

使用嵌套表:

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

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

jsFiddle演示

Answer 2

我想.closest()你正在寻找:)