Question

我有一个包含表格的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对象吗？

Answer 1

我个人不喜欢.load方法。我一直在努力。我甚至不知道为什么this示例没有正确加载和显示HTML。但是，我确实在那里做了一些测试。亲眼看看。

在回调中，一切都很好。在调用回调之外的相同函数之后执行回调。这意味着您的内容将在代码之后加载，因此您将收到空数组。

在Google Chrome开发者工具中，您仍然可以看到临时表具有子项的原因是您有对DOM对象的引用。我认为不同之处在于JavaScript范围与DOM范围不同。与纯JavaScript对象不同，我到目前为止对DOM对象的每个引用都会自动更新。请参阅this修订版。对同一个表的两个引用都表明第三行具有不同的内容，尽管它们在不同的时间被调用。

总结一下，您只需要一个 回调处理程序 。

编辑：

忘记它为什么不显示内容。当然不会，我从来没有更新它们。

Answer 2

只需使用.load()功能的回调：

tempTable.load('src.Html #all tr', function() {
  $(tempTable).find('tr');
});

为什么我不能操纵使用jQuery从外部HTML文件加载的行？

2 个答案: