jQuery $ .parents（）无法正常运行
[英]jQuery $.parents() not Functioning Properly
问题描述
I have a following code in my html file and i want to access the grand parent of an element like the table which is the grand parent of td in the following code. 
我的html文件中有以下代码，我想访问元素的祖父母，例如表，它是以下代码中td的祖父母。 For this I used the following jquery syntax but it displays "undefined". 为此，我使用了以下jQuery语法，但显示为“未定义”。 can any one guide me where the problem is ? 谁能指导我问题出在哪里？
<script type="text/javascript">
$(document).ready(function () {
alert($('td[id="4"]').parents().eq(1).attr("id"));
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-layout-center" id="center" runat="server">
<table id="Table1" >
<tr id="tr1">
<td id="3" class="cell" >
first cell
</td>
<td id="4" class="cell">
second cell
</td>
</tr>
</table>
<br />
<br />
</div>
</form>
</body>
</html>
3 个解决方案
解决方案1
3 已采纳 2012-04-13 15:20:27
First off, you can't run your code until the DOM is loaded. 首先，在加载DOM之前，您无法运行代码。 That means that you either must place it AFTER the relevant HTML in your source file or use jQuery's method of waiting until the DOM is loaded: 这意味着您必须将其放在相关HTML之后的源文件中，或者使用jQuery的方法来等待DOM加载：
$(document).ready(function() {
alert($('td[id="4"]').parents().eq(0).attr("id"));
});
Then, your code: 然后，您的代码：
$('td[id="4"]').parents().eq(0)
Is getting the first parent of the matching td element. 正在获取匹配的td元素的第一个父对象。 That first parent will be the tr tag which will alert it's ID, not the <table> element's id as you can see here: http://jsfiddle.net/jfriend00/rxUEp/ 该第一个父对象将是tr标签，该标签将提醒它的ID，而不是<table>元素的ID，如您在此处看到的： http : //jsfiddle.net/jfriend00/rxUEp/
If you want the table element's ID, then it's best to specify the actual parent you want with code like this: 如果需要表元素的ID，则最好使用以下代码指定所需的实际父项：
$(document).ready(function() {
alert($('td[id="4"]').closest("table").attr("id"));
});
Further fixing things up, ID values should start with an underscore or a letter, not a number and once you have a valid ID, you should use a much more efficient selector like this: 为了进一步解决问题，ID值应以下划线或字母开头，而不是数字，并且一旦有了有效的ID，就应该使用效率更高的选择器，如下所示：
<table id="Table1" >
<tr id="tr1">
<td id="cell3" class="cell" >
first cell
</td>
<td id="cell4" class="cell">
second cell
</td>
</tr>
</table>
$(document).ready(function() {
alert($('#cell4').closest("table").attr("id"));
});
PS Another reason it's good to use .closest("table") to find the desired parent is that tables all have an implicit <tbody> tag (even if it's not in your HTML) which means that the actual <table> tag is actually the 3rd parent up from your <td> . PS使用.closest("table")来查找所需父项的另一个原因是，表都具有隐式的<tbody>标记（即使它不在HTML中），这意味着实际的<table>标记实际上是从您的<td>到第三个父级。 With .closest("table") , you don't have to worry about these find details as jQuery just finds the one you have specified. 使用.closest("table") ，您不必担心这些查找详细信息，因为jQuery只是查找您指定的详细信息。
解决方案2
2 2012-04-13 15:17:33
You're running code on a table that doesn't exist yet. 您正在尚不存在的表上运行代码。 Move the <script> block below the table and it works (although you're going to be fetching the tr parent, not the table parent), or put it in an onready function so it doesn't fire until the entire DOM is finished. 将<script>块移动到表下方，即可工作（尽管您将获取tr父级，而不是table父级），或将其放在onready函数中，以便直到整个DOM完成后才触发。
demo: (alerts twice, one before the table, one after) http://jsfiddle.net/Fzcv4/1/ 演示：（提示两次，在表前一个，后一个） http://jsfiddle.net/Fzcv4/1/
解决方案3
0 2012-04-13 15:15:36
If you specifically know which parent element you want, try using closest: 如果您明确知道要使用哪个父元素，请尝试使用最近的：
$(function() {
alert($('td[id="4"]').closest("table").attr("id"));
});
Also, id attributes that begin with numbers are invalid. 同样，以数字开头的id属性无效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.