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

Question

在我正在编写的这个脚本中，我发现自己连续使用 .parent() 最多七次来获取元素。虽然这有效，但似乎可以/应该有一种更简单的方法来完成我不知道的这个/功能。除了更多元素上更具体的类/ID 之外，还有其他想法吗？

基本上，当我在下面的 html 中引用 id 为“innerSpan”的 span 时，我的问题归结为访问 id outer 的 div:

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

所以目前，我会做这样的事情:

varouter = $('#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() Self or ancestor. Self or travels up the DOM tree until it finds a match for the supplied selector
• .parents() Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied

使用嵌套表:

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

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

<强> jsFiddle demo