35

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

outer基本上，当我在下面的 html 中引用了 id 为“innerSpan”的跨度时，我的问题归结为使用 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/

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

4

4 回答 4

56

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

  • .closest()自己或祖先。Self or 沿着 DOM 树向上移动，直到找到与提供的选择器匹配的匹配项
  • .parents()沿着 DOM 树向上移动到文档的根元素，将每个祖先元素添加到临时集合中；然后，如果提供了选择器，它会根据选择器过滤该集合

使用嵌套表：

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


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

jsFiddle 演示

于 2012-07-19T20:25:16.147 回答
7

我想.closest()这就是你要找的:)

于 2012-07-19T20:25:14.973 回答
4

如果您知道该CSS Class name元素的，则可以调用该closest()方法

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

所以你的代码可以重写为

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

编辑：看到你的 JSfiddle 之后

使用类名获取父表。

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

工作样本：http: //jsfiddle.net/Hg4rf/2/

于 2012-07-19T20:25:48.307 回答
0

最好的方法是在parents()函数之后使用eq()

get_suboption_row($(this).parents().eq(7);
于 2021-09-05T01:24:59.430 回答