8 回答
当你调用.append()
它时,它会添加新元素,包括它的结束标签,所以你只是一个接一个地附加每个元素。
你最好调用append()
一次,将整个 html 作为字符串传递:
.append("<div class='fbItem'>"
+ "<img src='images/ajax-loader.gif' class='imagePreloader' />"
+ "<img src='" + imgUrl + "' class='img-polaroid' />"
+ "<span class='fbNames'>Name</span>" +
"</div>");
您将所有内容附加到单个 div。将 '.fbItem' div 附加到 '.fbResults' div,然后将所有其他内容附加到 '.fbItem' div。当您将 div 附加到其他 div 而不使用结束标记时,它会自动关闭 div,无需向其添加单独的结束标记。
你的代码是这样的:
jQuery('.fbResults').append("< div class='fbItem'">);
jQuery('.fbItem').append("< img src='images/ajax-loader.gif' class='imagePreloader' />");
jQuery('.fbItem').append("< img src='"+imgUrl+"' class='img-polaroid' />");
jQuery('.fbItem').append("< span class='fbNames'>Name</span>");
您可以这样做以确保正确附加新创建的项目:
// Create all the dynamic elements
var $div = $("<div/>",{class:'fbItem'});
var $img1 = $("<img>", {src:'images/ajax-loader.gif', class:'imagePreloader'});
var $img2 = $("<img>", {src:imgUrl, class:'img-polaroid'});
var $span = $("<span/>",{class:'fbNames', text:'Name'});
// Append the two images and the span to the dynamic div
$div.append($img1).append($img2).append($span);
// Finally append the div to 'fbResults'
$('.fbResults').append($div);
$('.fbItem').append("<div class='fbResults'>");
请像这样改变一切并尝试
您必须在您的 div 中附加 elemtns,因为在您的系统中,您在 div 之后而不是在 div 中附加
试试这个:
$('.fbResults').append("<div class='fbItem'>");
$('.fbItem').append("<img src='images/ajax-loader.gif' class='imagePreloader' />");
$('.fbItem').append("<img src='"+imgUrl+"' class='img-polaroid' />");
$('.fbItem').append("<span class='fbNames'>Name</span>");
这是应该的。当通过 jQuery 创建新元素时,它会自动关闭标签。
要么将此内容添加为文本,要么从 fbItem div 创建一个变量,然后将其他元素附加到该变量中。
你没有使用正确的append
方法。试试这个
var div = [];
div.push("<div class='fbItem'>");
div.push("<img src='images/ajax-loader.gif' class='imagePreloader' />");
div.push("<img src='"+imgUrl+"' class='img-polaroid' />");
div.push("<span class='fbNames'>Name</span>");
div.push("</div>");
$('.fbResults').append(div.join(''));
当你这样做时.append("<div class='fbItem'>");
jquery 自动附加一个结束标签</div>
演示-->
http://jsfiddle.net/uVcrn/
你可以像这样绕过它 -
$('.fbResults').append($("<div class='fbItem'>")
.append("<img src='images/ajax-loader.gif' class='imagePreloader' />")
.append("<img src='"+imgUrl+"' class='img-polaroid' />")
.append("<span class='fbNames'>Name</span>"));