在jQuery中做parent().parent().parent()等的更有效方法 [英] More efficient way to do parent().parent().parent() etc. in jquery

问题描述

在我正在编写的此脚本中，我发现自己连续七次使用.parent()来获取元素.尽管此方法有效，但似乎可以/应该有一种更简单的方法来执行我不知道的该功能.除了在更多元素上具有更具体的类/标识之外，还有其他想法吗?

In this script I'm writing, I find myself using .parent() up to seven times in a row to get elements. While this works, it seems like there could/should be an easier way to do this/ function I'm unaware of. Any ideas other than more specific classes/ids on more elements?

基本上，当我在以下html中引用ID为'innerSpan'的跨度时，我的问题归结为访问ID为outer的div:

Basically, my question boils down to accessing the div with id outer when I have a reference to the span with id 'innerSpan' in the html below:

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

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

So currently, I would do something like this:

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

并且由于深层嵌套的元素而变得发疯.

and that gets crazy with deeply nested elements.

另一个示例:

这是我的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:

and my script. i wrote a function and need to pass it the ids of the main rows tbody as well as the secondary tables id so i can dynamically add more rows. You don't really need that function for this question but basically i get those ids like so:

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/

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

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

click the add another to trigger event

推荐答案

您有2个嵌套表，
要获得所需的内容，可以使用这两个DOM遍历方法.closest()或.parents()

You have 2 nested tables,
to get what you want you can use this two DOM traversal methods .closest() or .parents()

• .closest() 向上移动DOM树，直到找到与提供的选择器匹配的对象
• .parents() 在DOM树上移动到文档的根元素，然后将每个祖先元素添加到临时收集；然后根据提供的选择器过滤该集合

• .closest() 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演示

jsFiddle demo

这篇关于在jQuery中做parent().parent().parent()等的更有效方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！