Javascript AppendChild将所有新元素添加到循环中的最后一个元素。为什么？

我正在循环一组div，为YouTube视频获取一个id，以获取并显示其标题、描述等。我循环的div如下所示：

<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>
<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>
<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>
<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>
<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>

出于某种原因，循环将所有信息添加到最后一个div，而不是将信息应用到循环中的当前div。知道为什么吗

另外，作为一个子问题，为什么我不能在ajax调用中访问I？我必须设置tutorial=tutorials[I]并将子项附加到tutorial中，而不是tutorials[I]，但我不能在ajax部分中仅使用tutorials[I]。我不明白有什么区别

(function () {
    var tutorials = document.getElementsByClassName('tutorialVideoDataContainer');

    for (var i = 0; i < tutorials.length; i++) {
        var tutorial = tutorials[i];

        console.log(i);
        console.log(tutorial);
        console.log(tutorials[i]);

        var id = tutorial.getAttribute('data-clipid');

        $.ajax({
            url: "http://gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=json",
            dataType: "jsonp",
            success: function (data) {
                var title = data.entry.title.$t;
                var description = data.entry.media$group.media$description.$t;
                var duration = data.entry.media$group.media$content[0].duration;
                var thumbnail = data.entry.media$group.media$thumbnail[3].url;

                if (title.length > 0) {
                    var titleElement = document.createElement("h3");
                    titleElement.innerText = title;
                    tutorial.appendChild(titleElement);
                }

                if (description.length > 0) {
                    var descriptionElement = document.createElement("p");
                    descriptionElement.innerText = description;
                    tutorial.appendChild(descriptionElement);
                }

                var minutes = Math.floor(duration / 60);
                var seconds = duration - minutes * 60;

                var durationElement = document.createElement("p");
                durationElement.innerText = minutes + ":" + seconds;
                tutorial.appendChild(durationElement);

                var clickLink = document.createElement("a");
                clickLink.className = "showOverlayVideo";

                var thumbnailElement = document.createElement("img");
                thumbnailElement.src = thumbnail;
                thumbnailElement.alt = title;
                clickLink.appendChild(thumbnailElement);

                tutorial.appendChild(clickLink);
            }
        });
    }
})();

（函数（）{
var tutorials=document.getElementsByClassName（'tutorialVideoDataContainer'）；
对于（var i=0；i0）{
var titleElement=document.createElement（“h3”）；
titleElement.innerText=标题；
附加子元素（titleElement）；
}
如果（description.length>0）{
var descriptionElement=document.createElement（“p”）；
descriptionElement.innerText=描述；
教程.appendChild（descriptionElement）；
}
var分钟=数学下限（持续时间/60）；
var秒=持续时间-分钟*60；
var durationElement=document.createElement（“p”）；
durationElement.innerText=分钟+“：”+秒；
教程.appendChild（durationElement）；
var clickLink=document.createElement（“a”）；
单击link.className=“showOverlayVideo”；
var thumbnailElement=document.createElement（“img”）；
thumbnailElement.src=缩略图；
thumbnailElement.alt=标题；
单击link.appendChild（thumbnailElement）；
教程.附加子项（单击链接）；
}
});
}
})();

如果在数组和板条箱闭包上循环访问数组的索引，则访问变量的引用，而不是它的副本，因此当所有异步代码完成时，您将以引用最后一个元素结束。要修复它，您需要使用新引用创建另一个闭包：

for (var i = 0; i < tutorials.length; i++) {
    (function(tutorial) {
        // you can use tutorial inside
    })(tutorials[i]);
}

for（var i=0；i

由于javascript事件循环的工作方式，循环在ajax请求返回之前完成运行。因此，当他们完成时，变量教程被设置为循环中的最后一个

---

从youtube api返回的数据是否包含剪辑ID，然后可以使用该ID在回调中而不是在循环中查找正确的dom元素。

我的猜测是，由于

$.ajax（）

不是阻塞函数，循环在ajax完成之前就完成了。这将导致执行路径如下所示：

<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>
<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>
<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>
<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>
<div class="tutorialVideoDataContainer" data-clipid="xxxxxxxxxxx"></div>

循环开始，i=0

Ajax调用已发出

i=1

i=2

i=教程长度

Ajax调用结束

---

希望这有帮助/有意义。

可能的JSFIDLE副本将有助于更好地说明您的问题集。可能是这样的：在ajax完成之前，i值已变为4（因为bucle比ajax调用快），但这三个ajax调用的值相同。@JasonWilczak我正在处理它！不，信息是正确的。它只是被添加到了错误的分区中。修复了所有的分区！万分感谢，jcubic！！