2

我正在尝试使用 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'));
  }

这个谷歌地图填充得很好，并且 console.log($('#thumblist')); 显示了我需要显示的两个条目，但其中只有一个附加到 #thumblist（最后一个）。任何人都可以帮忙吗？

4

2 回答 2

2

您将#thumblist在每次迭代中覆盖 HTML。相反，您应该附加：

 $('#thumblist').append(html);

.html()将覆盖元素的全部内容，而.append()将保持当前内容不变并仅添加到末尾。

于 2013-06-19T15:53:03.427 回答
0

你在使用 $('#thumblist').html(html); 将 html 分配给该元素？如果是这样，则每次将 var html 分配给它时，您都会在 $('#thumblist') 中写入 html。您可以改用 append() 或 after() 吗？这样您就不会替换拇指列表中的 html。

于 2013-06-19T15:52:36.207 回答