使用jQuery添加一些li元素到ul

我必须添加一些li元素到ul列表。每个li元素包含：使用jQuery添加一些li元素到ul

一个锚
一个img标签

的问题是，该图像不被显示。

的jsfiddle：http://jsfiddle.net/michelejs/hxA9r/

function echoImages(json) { 
    alert(json); 
    var obj = $.parseJSON(json); 
    var html = ""; 
    $.each(obj, function() { 
     html += '<li id ="menu_travel-store" class="space ">' + '<a href="' + this['redirectURL'] + '">' + '<img src="' + this['imageURL'] + '" />' + this['description'] + '</a>' + '</li>'; 
    }); 
    alert(html); 
    $("#cityOffers").append(html); 
}

我已经看到Chrome的添加这个CSS属性：

display: none !important; 
visibility: hidden !important; 
opacity: 0 !important; 
background-position: 0px 0px;

，但如果我用开发工具删除图像不仍然显示。

什么问题？谢谢。

来源

2012-12-19 michele

图像显示给我。哪个浏览器？ – CharliePrynn

我也它的工作 –

对于我以及:) – Morpheus

您使用了错误的jQuery函数使用

$("#cityOffers").html(html);

，而不是

$("#cityOffers").append(html);

HTML（）预计包含HTML代码的字符串，而追加（）期待一个DOM对象

来源

2012-12-19 11:44:01 wezzy

不，他没有。这将覆盖元素中的现有html。 – CharliePrynn

从[docs]（http://api.jquery.com/append/）：“内容DOM元素，** HTML字符串**或jQuery对象插入到匹配元素集中每个元素的末尾。“ –

我知道html（）替换元素内部的代码，但在这种情况下，我认为替换内容是正确的，我确信append（）需要一个DOM对象我的Chrome中我的不好 – wezzy

我在firefox中测试过它，它的工作原理。

我把你的代码构建得更好一点。

http://jsfiddle.net/hxA9r/4/

function echoImages(json) { 
    alert(json); 
    var obj = $.parseJSON(json); 
    var html = ""; 
    $.each(obj, function() { 
     html += '<li id ="menu_travel-store" class="space ">' + '<a href="' + this.redirectURL + '">' + '<img src="' + this.imageURL + '" />' + this.description + '</a>' + '</li>'; 
    }); 
    alert(html); 
    $("#cityOffers").append(html); 
} 
$(document).ready(function() { 
    data = '[{"id":"1","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/1.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/1.png","title":"1","description":"1"},{"id":"3","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/3.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/3.png","title":"3","description":"3"},{"id":"6","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/9.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/9.png","title":"9","description":"9"},{"id":"2","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/2.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/2.png","title":"2","description":"2"},{"id":"5","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/5.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/5.png","title":"5","description":"5"},{"id":"4","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/4.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/4.png","title":"4","description":"4"}]'; 
    echoImages(data); 

});

编辑：这听起来像是从主机访问图像的问题。我已经在多个浏览器上进行了新旧测试，运行良好。

来源

2012-12-19 11:49:49 CharliePrynn

我没有看到任何图片... img元素已添加，但我认为它隐藏了...有什么可能是错的？谢谢 – michele

你能访问这个网址吗？http://www.judopassion.com//affiliate//images//1.png – CharliePrynn

是的，我可以...... – michele

解决了，问题是AdBlock Chrome扩展程序阻止图像加载.....

来源

2012-12-19 11:58:55 michele

使用jQuery添加一些li元素到ul

回答

相关问题