我正在尝试使用JSON数据(从PHP返回)来创建HTML以显示给客户端。
我已经将这个功能用于填充谷歌地图。
function searchLocationsNear(center) {
//some AJAX that's working fine//
success:function(data, response){
console.log(data);
var markerNodes = data;
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var uid = markerNodes[i].id;
var name = markerNodes[i].name;
var address = markerNodes[i].address;
var distance = parseFloat(markerNodes[i].distance);
var avatar = markerNodes[i].avatar;
var bio = markerNodes[i].bio;
var rate = markerNodes[i].price;
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].lat),
parseFloat(markerNodes[i].lng));
createOption(name, distance, i);
createMarker(latlng, name, avatar, uid, bio, rate);
bounds.extend(latlng);
var html = "<div style='float:left; padding-right:10px;'><img src='user/"+uid+"/"+avatar+"'s alt='Tutor - "+name+" Profile Picture'></div><div class='infowindow'><h3>" + name + "</h3><hr><h4>Rate: "+rate+"</h4>"+bio+"</div>";
console.log(html);
$('#thumblist').html(html);
console.log($('#thumblist'));
}
此Google地图填写正常,以及console.log($('#thumblist'));显示我需要显示的两个条目,但只有一个条目附加到#thumblist(最后一个)。有人可以帮忙吗?
答案 0 :(得分:2)
您在每次迭代时都会覆盖#thumblist
HTML。相反,你应该追加:
$('#thumblist').append(html);
.html()
会覆盖元素的整个内容,而.append()
会保留当前内容的完整性,只是添加到结尾。
答案 1 :(得分:0)
你在使用$('#thumblist')。html(html);将html分配给该元素?如果是这样,那么每次将var html分配给$('#thumblist')时,你都会在html中写。你可以使用append()或after()吗?这样你就不会用拇指表替换html。