在每个div中找到div并将其附加到div

Question

我认为这个问题很老，但我没有找到任何正确答案。例如，我有几吨几乎相同的div：

<div class="grid-item">
    <img src="url to img" />
    <div class="city">London</div>
</div>

// etc...

此外，我在图像上方有叠加内容。我用jquery得到它：

$('.grid-item img').wrap('<div class=\'overlay-wrap\'></div>');
$('.grid-item img').after('<div class=\'overlay\'></div>');

我遇到的问题：

$( ".grid-item").each(function() {
   $(this).find('.city').appendTo('.overlay');
});

此功能无法正常工作。此函数会附加到每个.overlay中的每个.grid-item。

问题：

如何让它发挥作用？我需要每个.city附加到自己的.overlay。

感谢您的回答。抱歉英文不好。 圣诞快乐！

Answer 1

找到正确的叠加层，你有父元素，使用它。

$( ".grid-item").each(function() {
   $(this).find('.city').appendTo($(this).find('.overlay'));
});