jQuery $.parents() 无法正常运行答案

【问题标题】：jQuery $.parents() not Functioning ProperlyjQuery $.parents() 无法正常运行
【发布时间】：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不同。

标签： javascript jquery html

【解决方案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 允许它们，并且大多数浏览器无论如何都忽略了该规则。仍然不是一个好主意。