Question

我是jQuery，JS＆amp; amp; 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＆amp; CSS似乎没有阅读class="box"。

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

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

感谢任何帮助。谢谢：D

Answer 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>');
            })
        }
    }
});

如何在jQuery / JS </li>中添加类和元素（<p>）到附加的</p> <li>

1 个答案: