0

我对 jQuery、JS 和 AJAX 相当陌生，所以请多多包涵。

我试图创建一个动态，它将根据我的数据库中的结果生成其内容。这是我想用 jQuery/JS 生成的 HTML 代码：

<li class="box">
            <img class="picture" src="images/HotPromo/tagPhoto1.png"/>
            <p class="name"><b>Name</b></p>
            <p class="address">Address</p>
        </li>

它是一个包含类和一些 HTML 元素的列表项。

所以我尝试了这样的事情：

$.ajax({
            url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc
            type: "GET",
            error : function(jq, st, err) {
                alert(st + " : " + err);
            },
            success: function(result){
                if(result.length == 0)
                {
                    //temp
                    alert("not found");
                }
                else{
                    for(var i = 0; i < result.length; i++)
                    {
                        //generate <li>
                        $('#list').append('<li class="box">');
                        $('#list').append('<img class="picture" src="images/HotPromo/tagPhoto1.png"/>');
                        $('#list').append('<p class="name"><b>Name</b></p>');
                        $('#list').append('<p class="address">Address</p></li>');
                    }

                    var i=0;
                 //THIS PART IS ALREADY WORKING
                    $(".box").each(function(){
                            var name, address, picture = "";
                        if(i < result.length)
                        {
                            alert("generated");


                            name = result[i].name;
                            address = result[i].address;
                            picture = result[i].boxpicture;
                        }

                        $(this).find(".name").html(name);
                        $(this).find(".address").html(address);
                        $(this).find(".picture").attr("src", picture);
                        i++;
                    });
                }
            }
            });

AJAX 和 CSS 似乎不阅读class="box".

我做了一些研究和试验，我可以$('#list').append('<li><a href="#header">Back to top</a></li>');很容易地做一些事情。但我不知道为什么我的代码不起作用。

注意：我已经尝试手动编写上面的 HTML 代码，并且用于生成数据的 AJAX 已经在工作。所以现在看来​​唯一的问题是追加。

任何帮助表示赞赏。感谢：D

4

1 回答 1

1

.append() 不能用作字符串连接操作，您需要创建一个 dom 结构并将其传递给 .append() 调用

尝试

$('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>');

但是代码应该很简单

$.ajax({
    url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc
    type: "GET",
    error : function(jq, st, err) {
        alert(st + " : " + err);
    },
    success: function(result){
        if (result.length == 0) {
            // temp
            alert("not found");
        } else {

            var $list = $('#list');
            $.each(result, function(idx, item) {
                $list.append('<li class="box box' + idx
                             + '"><img class="picture" src="'
                             + item.boxpicture
                             + '"/><p class="name">' + item.name
                             + '</p><p class="address">'
                             + item.address + '</p></li>');
            })
        }
    }
});
于 2013-07-27T07:10:50.000 回答