将文件加载到 html 文件中，然后对其进行一些操作将不起作用答案

【问题标题】：Loading files into html file and then doing some operations on it won't work将文件加载到 html 文件中，然后对其进行一些操作将不起作用
【发布时间】：2016-07-29 18:03:15
【问题描述】：

我正在尝试将几个文档加载（附加）到 HTML 中，特别是一个标签，然后对加载的文件执行一些操作，例如计算一些标签的数量、附加更多标签、将一些项目放入数组等。

我正在加载的文件都是 SVG 文件，它们与 xml 具有相似的结构，并且使用 jQuery 搜索标签很简单。但这似乎不起作用。

我要显示 svg，当我尝试搜索特定标签时，结果为 null...

这是我的代码示例：

HTML：

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="stilovi/style.css">
    <title>Testing</title>
</head>

<body>
    <div id="avengers">
    <svg id="Layer_3" x="0" y="0" viewBox="-400 -100 1000 1000" xml:space="preserve" enable-background="new -400 -100 1000 1000"></svg>
    </div>
</body>

下面的脚本用于将文件附加到 html 中：

<script src="jquery-3.1.0.min.js"></script>
<script>
     $(document).ready(function(){
        var svgArray = ['capt_am_optimizirano1.svg','hulk_optimizirano1.svg', 'iron_man_optimizirano1.svg']
        $.each ( svgArray, function (index, data){
        $.get( data, function(data){ 
              $(data).find("style").appendTo("#Layer_3");
              $(data).find("g").appendTo("#Layer_3");
              });
         });

        var amerpoly = document.getElementById('amer');
        console.log(amerpoly);
    });  
</script>

我做错了吗？是否有另一种方法可以将文件加载到 html 中，然后使用其内容进行进一步处理？

【问题讨论】：

您正在执行 ajax 请求。 $.each/$.get 将在您从服务器返回结果之前循环/完成，这意味着您插入的元素将不存在（尚）。您需要等到所有 ajax 请求都完成。
怎么做？
轻松等待：计算您将执行 ajax 调用的次数，然后让成功处理程序在完成时增加一个计数器。 if (counter >= total_calls) { you_are_done(); }
是在每个函数中放置一个带有计数器的成功处理程序，还是只使用 when，将每个函数都包裹起来？
.when() 可用于单个请求，但您正在执行多个请求，并且每个请求都有自己的 when()。您仍然需要一个计数器，并且每次成功都会增加该计数器，并且每个成功处理程序都会比较计数。只有最终请求才会调用您的回调。

标签： javascript jquery html svg

【解决方案1】：

在 Daniel Beck 和 Marc B 的帮助下，我想出了一个答案。

我将代码更改为：

$(document).ready(function(){
        var svgArray = ['capt_am_optimizirano1.svg','hulk_optimizirano1.svg', 'iron_man_optimizirano1.svg'];
        var lengthA = svgArray.length;          
        var ajaxGetSvg = [];

        for(var i=0; i<lengthA; i++){
            ajaxGetSvg.push(
                $.get( svgArray[i], function(data){ 
                    $(data).find("style").appendTo("#Layer_3");
                    $(data).find("g").appendTo("#Layer_3");
              })
            );
        }
        $.when.apply($, ajaxGetSvg).then(function() {
            var amerpoly = document.getElementById('amer').querySelectorAll('polygon');
            console.log(amerpoly);
            console.log(amerpoly.length);
        });
});

所以我使用 $.when 来等待所有 ajax 请求完成，然后在 then 函数中执行一些操作（这只是一个示例）。

我还提前在 for 循环中生成请求，因为我将来可能会更改我将使用的文件数量。将所有请求保存在列表中并将该列表传递给 $.when 函数。请注意，在传递列表时，除了列表之外，我还使用 .apply ，因为 $.when 不接受数组。以下是我用来获得答案的链接。关于 $.when、$.apply 的文档以及关于 stackoverflow 的答案。

$.when

$.apply

帮助我生成并传递 $.when..Here 中的列表的答案

【讨论】：