在 jquery 中执行 parent().parent().parent() 等的更有效方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11568722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
More efficient way to do parent().parent().parent() etc. in jquery
提问by Rooster
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?
在我编写的这个脚本中，我发现自己最多连续七次使用 .parent() 来获取元素。虽然这有效，但似乎可以/应该有一种更简单的方法来做到这一点/我不知道的功能。除了关于更多元素的更具体的类/ID 之外，还有其他想法吗？
Basically, my question boils down to accessing the div with id outerwhen I have a reference to the span with id 'innerSpan' in the html below:
基本上，outer当我在下面的 html 中引用带有 id 'innerSpan' 的跨度时，我的问题归结为访问带有 id 的 div ：
<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()
var outer = $('#inner').parent().parent()
and that gets crazy with deeply nested elements.
这对于深度嵌套的元素会变得疯狂。
Another example:
另一个例子：
Here my html:
这是我的 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>
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:
和我的剧本。我编写了一个函数，需要将主行 tbody 的 id 以及辅助表 id 传递给它，以便我可以动态添加更多行。对于这个问题，您实际上并不需要该功能，但基本上我得到的这些 id 如下所示：
get_suboption_row($(this).parent().parent().parent().parent().parent().parent().parent().attr('id'), $(this).parent().parent().parent().parent().attr('id'));
thanks
谢谢
jsFiddle: http://jsfiddle.net/Hg4rf/
jsFiddle：http: //jsfiddle.net/Hg4rf/
click the add another to trigger event
单击添加另一个触发事件
回答by Roko C. Buljan
You have 2 nested tables,
to get what you want you can use this two DOM traversal methods .closest()or .parents()
您有 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
.closest()自己或祖先。自或沿 DOM 树向上移动，直到找到与提供的选择器匹配的匹配项.parents()沿着 DOM 树向上移动到文档的根元素，将每个祖先元素添加到一个临时集合中；然后，如果提供了选择器，则它会根据选择器过滤该集合
Using nested tables:
使用嵌套表：
$(this).closest('table').closest('tbody').attr('id');
$(this).parents('table').parents('tbody').attr('id');
回答by Andy
I think .closest()is what you're looking for :)
我认为.closest()这就是你要找的 :)
回答by Shyju
If you know the CSS Class namefor that element, you can call the closest()method
如果您知道该CSS Class name元素的 ，则可以调用该closest()方法
var thatParent= $("#someId").closest(".somCSSClassName")
So your code cal be rewritten as
所以你的代码 cal 被重写为
get_suboption_row($(this).closest("someClass").attr('id'),
$(this).closest("someOtherClass").attr('id'));
EDIT : After seeing your JSfiddle
编辑：在看到你的 JSfiddle 之后
Use the class name to get the Parent Table.
使用类名获取父表。
alert($(this).closest('tbody').closest('.table-bordered').attr('id'));
Working sample : http://jsfiddle.net/Hg4rf/2/
工作示例：http: //jsfiddle.net/Hg4rf/2/
