Jquery 图像正在变得不确定

我正在一个图像共享网站上工作，你可以在那里创建相册。每个相册并排呈现，默认情况下包含四个占位符图像。我想用相册中的前四张图片替换这些图片

问题是相册只能包含一个图像，在这种情况下，我希望其余的占位符图像保持原样。使用下面的代码，将替换所有占位符图像，但在相册仅包含一个（或两个或三个）图像的情况下，其余图像将替换为“./images/undefined”（代码的其余部分工作正常，相册的第一个图像被正确渲染）

我错过了什么

js代码：

if ($('.hiddenAlbumNames').length > 0){

    $('.hiddenAlbumNames').each(function() {
        var i = 0;
        var value = $(this).val();
        var valueArray = value.split(',');

        $(this).parent().find('.albumThumbnail').each(function() {
            $(this).attr('src', '../images/' + valueArray[i]);
            i++;
        });
    });
};

html代码：（此代码对于每个相册渲染一次）

尝试：

$（this）.parent（）.find（'.albumThumbnail'）.each（function（）{
如果（i尝试：

$（this）.parent（）.find（'.albumThumbnail'）.each（function（）{
如果（我修正了它（在我的真实代码中是正确的）。修正了它（在我的真实代码中是正确的）。
<div class="blog">
    <div class="post">
        <input class="hiddenAlbumNames" type="hidden" value="album.imageName") <- "album.imageName" is a node.js variable
        <div class="albumThumbnailArea">
            <img class="albumThumbnail" src='../img/bg.png'>
            <img class="albumThumbnail" src='../img/bg.png'>
            <img class="albumThumbnail" src='../img/bg.png'>
            <img class="albumThumbnail" src='../img/bg.png'>
        </div>
    </div>
</div>

    $(this).parent().find('.albumThumbnail').each(function() {
        if (i<valueArray.length) {
            $(this).attr('src', '../images/' + valueArray[i]);
            i++;
        } // else { ... something else ... }
    });