javascript - 通过类名从外部文件中获取 div。使用 jQuery

Question

很抱歉，如果之前有人回答过这个问题，但我搜索了几个小时，试图找到如何做我想做的事情。我知道 php 可能会有更简单的解决方案，但 php 可能不是一个选项。尽管纯 javascript 也很棒，但 Jquery 是更可取的。

我正在尝试通过类名从外部文件获取 div。有多个 div 使用相同的类名。我想将该类的所有 div 放入一个数组中，我可以在脚本的后面部分循环遍历该数组。

我正在尝试使此页面的 div 的内容与将始终更改的外部 html 文件的页面的 div 保持同步。但我不确定如何最好地做到这一点。

我在其他项目中将数据从 csv 文件导入到 div 中取得了很好的结果，没问题，但是这个让我受阻了。

我尝试了以下操作(出于测试目的，我只是登录到控制台)。我已经确认外部文件加载正常。我可以在 Chrome 开发工具中看到它加载。但在那之后，数据似乎再也没有真正去过任何地方。

$(document).ready( function() {
    var array = [];
    var testfunc =  $('.test').each(function () {array.push(this.innerHTML);});

    $.get('sharedResources/Bio.html', function(testfunc){
            console.log(array);
                                     });

});

我尝试了其他变体，但它们更加困惑，脚本开始从当前页面的类而不是外部文件中提取。我可以在控制台日志中看到当前页面的 innerHTML。

我确信有一种我没有看到的更好的方法。

我还尝试了我在网上看到的其他建议，但这也不起作用。这给了我“内容未定义”的错误……不要对此感到惊讶。

$.ajax('sharedResources/Bio.html').done(function(e) {
    $('.test').attr('innerHTML', contents);
});     

对不起，如果我问得不好。我不经常在这些论坛上提问。

谢谢!

Answer 1

假设 URL 是同源的，你真正需要做的就是

$.get('sharedResources/Bio.html', function(html){
    var elements = $('<div />', {html: html}).find('.className');
}).fail(console.log);

请注意，elements 将仅在该回调函数范围内可用，因为它是异步的。

还要注意添加的 fail 处理程序，并确保打开控制台并检查错误。