在 jQuery.each 中附加元素时出现错误

Posted 2023-03-16

【中文标题】在 jQuery.each 中附加元素时出现错误

【英文标题】：bug when appending elements inside jQuery.each

【发布时间】：2015-02-05 10:28:29

【问题描述】：

我有一个奇怪的问题。 我使用 jQuery.each 遍历一个数组并向我的 DOM 添加新元素；但似乎在 jQuery.each 中使用 jQuery.append 时出现问题：该函数有效（我可以在浏览器中看到新元素），但 html 检查器没有显示它们。

我猜这里有问题，HTML 检查器（Chrome）应该更新 DOM。我怀疑这也会在使用 jQuery 处理我的新内容时带来问题。

原始功能：

function objectBuildImages( object )
    var images = object.images;
    var img_container = $("<div class='object-images'></div>");


    $.each( images, function( i, path )  
        var img = $("<img />",  
            src:    path,
            class:  'object-image object-image-'+i

        );
        img_container.append(img);

    );

    return img_container;


var images_container = objectBuildImages(object);
object_container.append(images_container);

于是我开始调试。下面这个更简单的代码确实更新了 HTML 检查器...

调试步骤 1：

function objectBuildImages( object )
    var img_container = $("<div class='object-images'></div>");

    var img = $("<img />",  
        src:   'test.jpg'
    );
    img_container.append(img);

    return img_container;


var images_container = objectBuildImages(object);
object_container.append(images_container);

但是一旦我将它移动到每个 jQuery 中，它就不会再更新检查器了。

调试步骤 2：

function objectBuildImages( object )
    var images = object.images;
    var img_container = $("<div class='object-images'></div>");

    $.each( images, function( i, path )  

        var img = $("<img />",  
            src:   'test.jpg'
        );
        img_container.append(img);

    );

    return img_container;


var images_container = objectBuildImages(object);
object_container.append(images_container);

是不是我做错了什么？

感谢您的帮助！

【问题讨论】：

什么是object_container？您将内容附加到它，但它看起来不像 object_container 被附加到 DOM。

是的，我没有把它放在这里，因为我的代码很复杂。但正如我所说，“该功能有效（我可以在浏览器中看到新元素），但 HTML 检查器没有显示它们。”

【参考方案1】：

感谢您的回复！我发现我的问题来自其他地方（我的图像对象格式不正确）。 感谢您的帮助 - 我可以删除这个问题吗？