0

HTML ファイルに次のコードがあり、次のコードで 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 の後に配置するか、DOM が読み込まれるまで待機する jQuery の方法を使用する必要があります。

$(document).ready(function() {
    alert($('td[id="4"]').parents().eq(0).attr("id"));
});

次に、コード:

$('td[id="4"]').parents().eq(0)

一致するtd要素の最初の親を取得しています。最初の親はtr、要素の ID ではなく、ID を警告するタグになり<table>ます: 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目的の親を見つけるために使用するのが良いもう1つの理由.closest("table")は、テーブルにはすべて暗黙の<tbody>タグがあり(HTMLになくても)、実際の<table>タグは実際にはあなたの3番目の親であること<td>です。では.closest("table")、jQuery が指定したものを見つけるだけなので、これらの検索の詳細について心配する必要はありません。

于 2012-04-13T15:20:27.220 に答える
2

まだ存在しないテーブルでコードを実行しています。<script>ブロックをテーブルの下に移動すると機能します (ただし、tr親ではなく親を取得しますtable)。または、onready 関数に入れて、DOM 全体が終了するまで起動しないようにします。

デモ: (テーブルの前に 1 回、テーブルの後に 1 回、2 回アラートを出す) 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 に答える