Question

我有以下内容，我正在尝试在容器div中添加div：

容器div位于页面顶部，设置如下：

<div id="facebookPhotosContainer" />

现在这里是使用缩略图填充该div的代码：

    function ShowThumbnails(aThumbs, sPhotoContainerDivID)
    {
        alert("sPhotoContainerDivID: " + sPhotoContainerDivID);
        photoContainer = "div#" + sPhotoContainerDivID;

        for(i = 0, l = aThumbs.length; i < l; i++)
        {
            alert("appending");
            $(photoContainer).append("<div id='thumnailContainer'><img src=" + aThumbs[i].photoSrc + " class='thumbnail' /></div>");
            //$("<div id='uploadThumnailContainer'><img src=" + aThumbs[i].photoSrc + " class='thumbnail' ></img></div>").appendTo("div#" + sPhotoContainerDivID);
        }
    }

什么都没有出现。不知道我错过了什么......但它进入循环并调用代码试图在这里附加。

旁注：此代码位于IFrame内的页面中。

更新：

这是我最新的，仍未呈现到页面：

<form id="form1" runat="server">
    <div id="photos-iFrameContent">
        <div>
            <p>Log in</p>
            <p id="loginButtonContainer"><input type="image" id="btnFacebookLogin" src="images/facebookLoginBtn.jpg" /></p>
            <p><select id="albumDropdown" /></p>
            <div id="facebookPhotosContainer" />
        </div>
    </div>
</form>

    function ShowAlbumPhotoThumbnails(aAlbumPhotos, sPhotoContainerDivID)
    {
        alert("sPhotoContainerDivID: " + sPhotoContainerDivID);
        photoContainer = "#" + sPhotoContainerDivID;

        for(i = 0, l = aAlbumPhotos.length; i < l; i++)
        {
            alert("about to append a new div:  aAlbumPhotos[i].facebookPhotoPageSrc: " + aAlbumPhotos[i].facebookPhotoPageSrc);
            alert("html that will be spit out to the page: " + "<div class='uploadThumnailContainer'><img src='" + aAlbumPhotos[i].facebookPhotoPageSrc + "' class='thumbnail' /></div>");
            $(photoContainer).append("<div class='uploadThumnailContainer'><img src='" + aAlbumPhotos[i].facebookPhotoPageSrc + "' class='thumbnail' /></div>");
        }
    }

这是我设置的那些警报的传入数据示例：

即将附加一个新的div：aAlbumPhotos [i] .fullSizePhotoSrc：http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs098.ash2/38258_1435105371111_1637262814_1014688_8078397_n.jpg

将向网页吐出的HTML：

Answer 1

如果您的来源有任何类型的间距或引号，它会使用无效的HTML将其抛弃，请确保您的src=""上有引号并使用类而不是{{1}的ID } wrapper，像这样：

<div>

使用$(html, props)方法更轻松/更清洁：

$(photoContainer).append("<div class='thumnailContainer'><img src='" + aThumbs[i].photoSrc + "' class='thumbnail' /></div>");

包装器上的ID不是一个好主意，因为它在循环中，如果此处有多个缩略图，则不会是唯一的。它不太可能导致您当前的问题，但无论如何最好还是修复它。

Answer 2

我让它在这里工作：http://jsfiddle.net/v7qTP/ 删除空选择

<form id="form1" runat="server"> 
    <div id="photos-iFrameContent"> 
        <div> 
            <p>Log in</p> 
            <p id="loginButtonContainer"><input type="image" id="btnFacebookLogin" src="images/facebookLoginBtn.jpg" /></p> 
                        <div id="facebookPhotosContainer" />
    </div> 
</form>

这是我用来验证的代码（添加对象和函数调用以获得源代码）

var myphoto = [{facebookPhotoPageSrc:'http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs098.ash2/38258_1435105371111_1637262814_1014688_8078397_n.jpg'}];
$(document).ready(function()
                  {
                      ShowAlbumPhotoThumbnails(myphoto,"facebookPhotosContainer");
                  });
function ShowAlbumPhotoThumbnails(aAlbumPhotos, sPhotoContainerDivID) 
{ 
    //alert("sPhotoContainerDivID: " + sPhotoContainerDivID); 
    photoContainer = "#" + sPhotoContainerDivID; 

    for(i = 0, l = aAlbumPhotos.length; i < l; i++) 
    { 
       // alert("about to append a new div:  aAlbumPhotos[i].facebookPhotoPageSrc: " + aAlbumPhotos[i].facebookPhotoPageSrc); 
        //alert("html that will be spit out to the page: " + "<div class='uploadThumnailContainer'><img src='" + aAlbumPhotos[i].facebookPhotoPageSrc + "' class='thumbnail' /></div>"); 
        $(photoContainer).append("<div class='uploadThumnailContainer'><img src='" + aAlbumPhotos[i].facebookPhotoPageSrc + "' class='thumbnail' /></div>"); 
    } 
}

在数组中包含两个对象的示例：

var myphoto = [{facebookPhotoPageSrc:'http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs098.ash2/38258_1435105371111_1637262814_1014688_8078397_n.jpg'},{facebookPhotoPageSrc:'http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs098.ash2/38258_1435105371111_1637262814_1014688_8078397_n.jpg'}];

Answer 3

尝试

$('#id')

其中id是id

麻烦将<div>附加到现有的</div>

3 个答案: