Question

如何使用.each（）获取var，使用它，清除它然后用下一个.each（）循环重新开始？

我有不同数量的带有'title'属性的图片。我想获取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

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

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函数中定义了变量，所以每次都会创建一个新变量。

使用jQuery .each（）在多个图像下面追加title属性。

4 个答案: