Question

我有一个简单的问题。我有这个功能：

    function buildGallery(assets) {
        var $target = $("#assets");
        var containerWidth = $target.width();
        var overallWidth = 0;
        var items = "";

        $.each(assets, function (i, asset) {
            var percent = 300 / asset.Metadata.ImageHeight;
            var width = percent * asset.Metadata.ImageWidth;
            var item = "<img src=\"" + asset.ThumbNail + "\" />";

            overallWidth += width;
            items += item;

            if (overallWidth >= containerWidth) {
                var $items = $(items);
                var padding = overallWidth - containerWidth;
                var counter = $items.find("img").length;
                var p = padding / counter;

                $items.each(function (n, image) {
                    console.log(image);

                    var img = "<div style=\"float: left; width: " + p + "px; overflow: auto;\">" + image + "</div>";

                    $target.append(img);
                });

                overallWidth = 0; // reset
                items = "";
            }
        });

        $target.removeClass("ajax");
    }

我的问题是，当我尝试将div添加到目标时，它只显示[object HTMLDivElement]而不是实际显示html。

我以前见过这个，但无论我尝试什么似乎都不起作用。有人可以帮我一把吗？

Answer 1

问题是您正在尝试使用图像DOM元素而不是HTML来构建新的div元素：

var img = "<div style=\"float: left; width: " + p + "px; overflow: auto;\">" + image + "</div>";
                                           // this is a DOM object not a string ^

如果要使用字符串形式，则需要从对象中获取HTML字符串：

var img = "<div style=\"float: left; width: " + p + "px; overflow: auto;\">" + image.innerHTML + "</div>";

或者您可以创建div的jQuery对象并将image元素附加到它：

var img = $("<div style=\"float: left; width: " + p + "px; overflow: auto;\"></div>").append(image);

虽然如果您在一个步骤中将每个图像包装在一个div中，然后将所有图像一次性添加到$target，它可能更容易阅读：

$items.wrap("<div style=\"float: left; width: " + p + "px; overflow: auto;\"></div>").appendTo($target);

我认为您的代码可能有另一个问题：if (overallWidth >= containerWidth) {语句应该是$.each(assets, ...)循环的外。在里面，你将把资产列表中的每个元素添加到DOM length - index次。

jquery附加到DOM不能按预期工作

1 个答案: