0

我的 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>
4

3 回答 3

3

首先，在加载 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"));
});

PS 找到所需父级的另一个好处.closest("table")是表都有一个隐式<tbody>标签（即使它不在您的 HTML 中），这意味着实际<table>标签实际上是您的<td>. 有了.closest("table")，您不必担心这些查找细节，因为 jQuery 只会找到您指定的那个。

于 2012-04-13T15:20:27.220 回答
2

您正在一个尚不存在的表上运行代码。将<script>块移动到表格下方并且它可以工作（尽管您将获取tr父级，而不是table父级），或者将它放在一个 onready 函数中，这样它在整个 DOM 完成之前不会触发。

演示：（警报两次，一次在表前，一次在表后） http://jsfiddle.net/Fzcv4/1/

于 2012-04-13T15:17:33.303 回答
0

如果您特别知道您想要哪个父元素，请尝试使用最接近的：

$(function() {
    alert($('td[id="4"]').closest("table").attr("id"));
});

此外，id以数字开头的属性无效。

于 2012-04-13T15:15:36.880 回答