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

时间:2012-12-19 11:41:43

标签: jquery html html-lists

我必须将一些li元素添加到ul列表中。 每个li元素包含:

  • 一个锚

  • 一个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;

但是如果我用开发者工具删除它,图像仍然不会显示。

有什么问题? 感谢。

2 个答案:

答案 0 :(得分:2)

解决了,问题是阻止图片加载的AdBlock Chrome扩展程序.....

答案 1 :(得分:0)

我在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);

});​

编辑:这听起来像是从主机访问图片的问题。我已经在新旧浏览器上进行了测试,运行正常。