Javascript 使用动态id更改div内的范围内容

我需要使用div id动态更改

div

标记内部的

span

标记的内容。我试过这个代码，但不起作用。我认为

$（'#'+ids[I]）

的问题。即使是我也能正确地获得每个id的信息。请给我任何建议

JavaScript:

var ids = ["Of0UWpK5bEo","1qYMJjTxJnM","8aAab7gxbEg","ZEd6aKdeC8g","qQcFvamzdno","yovbI8DOMpk"];
for (i = 0; i < ids.length; i++) {
    $.get("https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id="+ ids[i] + "&key=AIzaSyDEm5wGLsWi2G3WG40re-DAJcWioQSpJ6o", function(data){
        $('#'+ids[i]).parent().find('.caption').text(data.items[0].snippet.title);
    });
}

var id=[“of 0uwpk5beo”、“1qYMJjTxJnM”、“8aAab7gxbEg”、“ZEd6aKdeC8g”、“qQcFvamzdno”、“yovbI8DOMpk”]；
对于（i=0；i

HTML:

图片下方的文本

您需要的是：

$('#'+ids[i]).find('.caption').text(...);

正如

。caption

是相关ID本身的子项。因此，

.parent（）

不是必需的

另外，在循环中使用

var

，如下所示。否则，你会无缘无故地创建一个全局

for (var i = 0; i < ids.length; i++) {

图片下方的文本
图片下方的文本
图片下方的文本

这段代码写得不是最好的，但我可以解释发生了什么

你的根本问题是“我”的价值不再是你所期望的。当AJAX函数的结果完成时，它是一个未定义的值。正确的方法是使用迭代器：

$.each(ids, function(index, id) {
    $.get("..." + id + "...", function(data) {
        $("#" + id).parent().find('.caption').text(data.items[0].snippet.title);
    });
});

此外，请确保您的代码位于“document.ready（）”块中，否则您可能无法找到以下元素：

$(document).ready(function() {
    $.each(ids, function(index, id) {
        $.get("..." + id + "...", function(data) {
            $("#" + id).parent().find('.caption').text(data.items[0].snippet.title);
        });
    });
});

这就是说，看起来应该用Javascript动态创建接口。这将允许您避免标记中匹配ID和搜索同级标记的许多问题，因为您已经有了引用

工作小提琴：

---

这里有一个稍微好一点的版本，可以动态创建图像和标题。它包括将文本限制为20个字符的代码：

我发现这是变量范围的问题

这可以通过使用匿名函数来解决

将循环变量

i

传递给匿名函数，以便可以在函数内部访问

ii

看看这个

下面是片段

var id=[“of 0uwpk5beo”、“1qYMJjTxJnM”、“8aAab7gxbEg”、“ZEd6aKdeC8g”、“qQcFvamzdno”、“yovbI8DOMpk”]；
var i；
对于（i=0；i

图片下方的文本

控制台中是否有任何错误？AJAX成功通过了吗？定义“不工作”。我没有收到任何错误。。。完成循环工作。他希望标题更新为视频的标题。没有错误，因为jQuery找不到id“#undefined”的结果，因此什么也做不到。那么，问题就出在别处了！你看过你的演示吗？我看过你的演示。如果我像

0

ex:

ids[0]

working那样直接传递索引值，它就会工作。但是如果我使用like

ids[I]

不工作。季节？\@Satya-看看我的答案。这是一个范围问题。$.get（）调用的函数没有捕获“i”的值，这意味着在使用时它是未定义的。如果答案对您不起作用，请告诉我您看到了什么，我会尽力帮助您。底部的提琴应该正确地更新文本。它的工作原理。谢谢那么，循环有什么问题吗@64位或更少。这是外壳的问题。可以将“i”的值括起来，但每次调用$.get（）时它都会递增。对$.get（）的调用将一直排队，直到循环完成。在调用$.get（）调用的函数时，“i”的值比ID列表的最大大小大1。所以你失去了你正在引用的ID的踪迹。使用迭代器通过将索引和值作为值传递给外部封闭函数来捕获它们。有时我会用更多的词来获得标题。所以我想要的是，标题必须是大约20个字符长。我想跳过剩下的。我该怎么办@64BitBob查看我放入的更新小提琴。它使用一个子字符串来限制文本，如果超过20个字符，则在末尾添加一个简单的省略号。有更好的方法处理CSS中的溢出（即设置宽度，将溢出设置为隐藏，然后设置文本溢出属性），但这将满足您的要求。如果答案解决了您的问题，请不要忘记将其标记为已接受。解决此问题的正确方法是使用$.each（）迭代器。这就是迭代器存在的原因。这些使用匿名函数的答案正在传播坏习惯。

$(document).ready(function() {
    $.each(ids, function(index, id) {
        $.get("..." + id + "...", function(data) {
            $("#" + id).parent().find('.caption').text(data.items[0].snippet.title);
        });
    });
});