Question

我的html文件中有以下代码，我想访问一个元素的祖父，就像下面代码中td的祖父表。为此，我使用了以下jquery语法，但它显示“undefined”。任何人都能引导我解决问题所在吗？

  <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>

Answer 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"));
});

P.S。使用.closest("table")查找所需父级的好处的另一个原因是，所有表都具有隐式<tbody>标记（即使它不在您的HTML中），这意味着实际的<table>标记是实际上是你<td>的第3位父母。使用.closest("table")，您不必担心这些查找详细信息，因为jQuery只找到您指定的那个。

Answer 2

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

demo :(警报两次，一次在桌子前面，一次在后面） http://jsfiddle.net/Fzcv4/1/

Answer 3

如果你明确知道你想要哪个父元素，请尝试使用最接近的：

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

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

jQuery $ .parents（）无法正常运行

3 个答案: