0

テーブルを含む 1 つの HTML ファイルを取得しました。

src.Html:

<table id="all">
  <tr>
    <th>Row 1</th>
    <td>Content 1</td>
  </tr>
  <tr>
    <th>Row 2</th>
    <td>Content 2</td>
  </tr>
  <tr>
    <th>Row 3</th>
    <td>Content 3</td>
  </tr>
</table>

そして、ここに私のコードがあります:

$('document').ready(function(){
    var tempTable = $('<table id="tempTable"></table>');
    tempTable.load('src.Html #all tr');
    console.log(tempTable);    --> it shows content of tempTable

    console.log($(tempTable).find('tr'));   --> it shows []

});

それは機能し、tempTable の内容を出力します。

しかし、ニーズに基づいて行を取得したい場合、何も表示されません! そのような：

$(tempTable).find('tr');        --> []
$(tempTable).find('tr').eq(1);  --> []
$('#tempTable tr:eq(2)')        --> []

誰でも理由を教えてもらえますか? その tempTable は通常の DOM オブジェクトではありませんか?

4

2 に答える 2

0

個人的には.loadメソッドが嫌いです。私はいつもそれに苦労してきました。この例が HTML を正しく読み込んで表示しない理由もわかりません。ただし、そこでいくつかのテストを行いました。自分で見て。

コールバック内では、すべて問題ありません。コールバックは、コールバックの外で同じ関数を呼び出した後に実行されます。つまり、コードの後に​​コンテンツが読み込まれるため、空の配列を受け取ります。

Google Chrome 開発者ツールの例で、一時テーブルに子があることをまだ示している理由は、DOM オブジェクトへの参照があるためです。違いは、JavaScript のスコープが DOM のスコープと異なることだと思います。純粋な JavaScript オブジェクトとは異なり、DOM オブジェクトへのこれまでのすべての参照は自動的に更新されます。このリビジョンで参照してください。同じテーブルへの両方の参照は、異なるタイミングで呼び出されますが、3 行目の内容が異なることを示しています。

結論として、必要なのはコールバック ハンドラだけです。

編集：

コンテンツが表示されない理由は忘れてください。もちろん、そうではありません。私はそれらを更新したことはありません。

于 2012-08-08T04:20:11.503 に答える
0

関数のコールバックを使用するだけ.load()です：

tempTable.load('src.Html #all tr', function() {
  $(tempTable).find('tr');
});
于 2012-08-08T04:21:59.020 に答える