使用 jQuery .each() 在多个图像下方附加标题属性。

Question

如何使用 .each() 获取 var、使用它、清除它，然后从 .each() 的下一个循环开始？

我有不同数量的带有“标题”属性的图像。我想获取 title 属性并将其附加到每个图像后面的新 div 中，创建标题。然而，在包含 2 个图像的页面上使用以下代码，我在每个图像下都得到了它们的两个标题。

我如何运行 .each() 以便它在第一个图像上工作，擦除它的 var，然后在第二个图像上工作？

jQuery(".node-type-article .imagefield-imagelink img").each( function() {
    var caption = jQuery(this).attr('title');
    jQuery(this).after('<div class="caption"></div>');
    jQuery('.caption').append(caption);
    caption = '';
});

Answer 1

这是有问题的线。它匹配两个 div：

jQuery('.caption').append(caption);

这样做：

jQuery(".node-type-article .imagefield-imagelink img").each(function() {
    var caption = jQuery(this).attr('title');
    jQuery(this).after('<div class="caption">' + caption + '</div>');
});

另外，您不需要清除标题 var。它对于函数的每次调用都是本地的。

Answer 2

每次迭代都会开始一个新的范围。您不需要擦除 var title，因为它会在迭代后自动超出范围。

Answer 3

您的问题在这里：

caption = '';

这将起作用：

jQuery(".node-type-article .imagefield-imagelink img").each( function() {
    var caption = jQuery(this).attr('title');
    jQuery(this).after('<div class="caption"></div>');
    jQuery('.caption').append(caption);
    this.title = ''; //or the jQuery way --> $(this).attr('title','');
});

Answer 4

你的罪魁祸首是： jQuery('.caption').append(caption);

这将找到所有具有标题类的对象，并将标题文本附加到其中。

您可能看到的是一个带有一个标题的标题，然后一个带有 2 的标题。

解决方法是添加 next 语句，因此

jQuery('.caption').append(caption);

您可以：

$(this).next('.caption').html(caption);
// $ and jQuery are the same thing btw

编辑

抱歉忘记了要添加，您不需要清除标题变量。

因为您已在 each 函数中定义了变量，所以每次都会创建一个新变量。