jQuery $.parents() 无法正常运行
Posted
技术标签:
【中文标题】jQuery $.parents() 无法正常运行【英文标题】：jQuery $.parents() not Functioning Properly 【发布时间】：2012-04-13 15:13:42 【问题描述】：我的 html 文件中有以下代码，我想访问一个元素的祖父，例如 table，它是以下代码中 td 的祖父。为此，我使用了以下 jquery 语法，但它显示“未定义”。谁能指导我问题出在哪里？
<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>
【问题讨论】：
这不是undefined 对我来说：jsfiddle.net/tt3wC 也许你的实际 HTML/代码是不同的。哦，是的，你必须在加载 DOM 后执行代码，你会知道if you read the tutorial：“因为我们在使用 jQuery 时所做的几乎所有事情都读取或操作文档对象模型 (DOM)，我们需要确保我们在 DOM 准备好后立即开始添加事件等。”
jQuery select ancestor的可能重复
您的实际代码周围是否有现成的处理程序？ $(function() ... );
不是在你的例子中，他们不是。如果您没有向我们展示您实际使用的代码，我们将无法为您提供很好的帮助。
不获取表ID与获取undefined不同。
【参考方案1】：
首先，在加载 DOM 之前，您无法运行代码。这意味着您要么必须将其放在源文件中相关 HTML 之后，要么使用 jQuery 的方法等待 DOM 被加载：
$(document).ready(function()
alert($('td[id="4"]').parents().eq(0).attr("id"));
);
然后，你的代码：
$('td[id="4"]').parents().eq(0)
正在获取匹配的td 元素的第一个父元素。第一个父级将是 tr 标签，它会提醒它的 ID，而不是 <table> 元素的 ID，如您在此处看到的：http://jsfiddle.net/jfriend00/rxUEp/
如果您想要表格元素的 ID，那么最好使用如下代码指定您想要的实际父级：
$(document).ready(function()
alert($('td[id="4"]').closest("table").attr("id"));
);
进一步解决问题，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"));
);
附：使用.closest("table") 查找所需父级很好的另一个原因是表都有一个隐含的<tbody> 标记（即使它不在您的HTML 中），这意味着实际的<table> 标记实际上是第三个父级你的<td>。使用.closest("table")，您不必担心这些查找细节，因为 jQuery 只会找到您指定的那个。
【讨论】：
是的，它有效..！谢谢 。但有效身份证的问题不是问题。它与数字一起工作正常 @zeeshan - 一些浏览器允许您使用数字作为 id，但您真的想使用一些旧浏览器可能无法正常工作的 HTML 吗？遵守规则总是最安全的，而且不会花费您任何费用。如果您将该号码用于其他用途，请不要将其放入 ID。将其放入data-num="4" 之类的自定义属性中，然后使用 .data("num") 获取它。【参考方案2】：
您正在一个尚不存在的表上运行代码。将<script> 块移到表格下方并且它可以工作（尽管您将获取tr 父级，而不是table 父级），或者将其放入onready 函数中，因此它不会触发，直到整个 DOM 完成了。
demo：（提醒两次，一次在桌子之前，一次在桌子之后） http://jsfiddle.net/Fzcv4/1/
【讨论】：
【参考方案3】：如果您明确知道想要哪个父元素，请尝试使用最接近的：
$(function()
alert($('td[id="4"]').closest("table").attr("id"));
);
另外，id 以数字开头的属性无效。
【讨论】：
以数字开头的id属性在HTML 4下无效； HTML5 允许它们，并且大多数浏览器无论如何都忽略了该规则。仍然不是一个好主意。以上是关于jQuery $.parents() 无法正常运行的主要内容，如果未能解决你的问题，请参考以下文章
jQuery中的closest()和parents()的差别
.parents() 没有 jquery - 或者为父母的 querySelectorAll [重复]