动态加载的文本不在 div 内答案

【问题标题】：Dynamically loaded text not staying inside div动态加载的文本不在 div 内
【发布时间】：2012-11-29 05:39:43
【问题描述】：

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

这是一个解决问题的 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;
}

【问题讨论】：

您不应该为所有元素提供相同的 ID 'post'，例如。正在调查..
我认为它们共享所有相同的 ID，但不同的类足以区分它们吗？因为有很多类似的样式实例，但细微的差异......我也会进一步挖掘！
ID 必须是唯一的。一定要使用类。
@tbremer 确实应用了不同的样式，但是如果您使用通用样式，则应该使用类。正如 Billy Moat 所说，ID 用于独特的元素
@BillyMoat 修复了 CSS 以使它们成为所有类，感谢您的提示。

标签： jquery css dynamic append

【解决方案1】：

这是因为在某些 append 方法中，您预先关闭了 div。检查 type 等于 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!");
            }
        }
    }
}

【讨论】：

完美修复！我没有意识到“\”会关闭一个标签。
关闭标签的不是“\”，而是“/”。
错字！我就是这个意思，哈哈。抱歉，但在我回答这个问题的时候，我上班迟到了。