jquery - 动态加载的文本不在 div 内

Question

我有很多动态加载的内容，出于某种原因，图像效果很好，但链接和文本却不是。

这是一个有问题的 JSFiddle:http://jsfiddle.net/HRs3u/1/

我猜这与文本缓存或不缓存有关？

这是代码的追加部分:

function findpost(timestamp, blog){
    //console.log(blog);
    var length = blog.length;
    for(var e=0; e<length; e++){
        var type = blog[e+1];
        if(timestamp === blog[e]){
            if(type === 0){
                $("#content").append("\
                    <div class='post photo'>\
                    <img src='"+blog[e+2]+"' width='400px'/>\
                    </div>"
                );
            } else if(type === 1){
                $("#content").append("\
                    <div class='post video'>\
                    "+blog[e+2]+"<br>\
                    "+blog[e+3]+"\
                    </div>"
                );
                console.log("Video");
            } else if(type === 2){
                $("#content").append("\
                    <div class='post link' />\
                    <a href='"+blog[e+2]+"' target='_blank'>"+blog[e+3]+"</a>\
                    </div>\
                ");
                console.log("Link!");
            } else if(type === 3){
                var title = blog[e+3];
                var text = blog[e+2];
                $("#content").append("\
                    <div class='post text' />\
                    <h2>"+title+"</h2>\
                    "+text+"\
                    </div>\
                ");
                console.log("Text!");
            } else if(type === 4){
                $("#content").append("\
                    <div class='post tweet' />\
                    "+blog[e+2]+"\
                    </div>\
                ");
                console.log("Tweet!");
            } else {
                console.warn("ERROR!");
            }
        }
    }
}

还有 CSS:

/*___Post Divs*/
.post{
    display     : inline-block;
    float       : left;
    line-height : 0;
    margin      : 5px;
    overflow    : hidden;

    border      : 1px solid #000;

    width       : 400px;
    height      : 400px;

}

.post.photo{
    background-color: #ccc;
}

.post.video{
    background-color: #0f1;
}

.post.link{
    background-color: #ff4;
}

.post.text{
    background-color: #c0f;
}

.post.tweet{
    background-color: #f44;
}

Answer 1

这是因为在某些追加方法中，您事先关闭了 div。检查类型等于 2、3 和 4 的脚本。

function findpost(timestamp, blog){
    //console.log(blog);
    var length = blog.length;
    for(var e=0; e<length; e++){
        var type = blog[e+1];
        if(timestamp === blog[e]){
            if(type === 0){
                $("#content").append("\
                    <div id='post' class='photo'>\
                    <img src='"+blog[e+2]+"' width='400px'/>\
                    </div>"
                );
            } else if(type === 1){
                $("#content").append("\
                    <div id='post' class='video'>\
                    "+blog[e+2]+"<br>\
                    "+blog[e+3]+"\
                    </div>"
                );
                console.log("Video");
            } else if(type === 2){
                $("#content").append("\
                    <div id='post' class='link'>\ 
                    <a href='"+blog[e+2]+"' target='_blank'>"+blog[e+3]+"</a>\
                    </div>\
                ");
                console.log("Link!");
            } else if(type === 3){
                var title = blog[e+3];
                var text = blog[e+2];
                $("#content").append("\
                    <div id='post' class='text'>\
                    <h2>"+title+"</h2>\
                    "+text+"\
                    </div>\
                ");
                console.log("Text!");
            } else if(type === 4){
                $("#content").append("\
                    <div id='post' class='tweet'>\
                    "+blog[e+2]+"\
                    </div>\
                ");
                console.log("Tweet!");
            } else {
                console.warn("ERROR!");
            }
        }
    }
}​