将JSON检索到的图像URL放在<li>标记</li>中

Question

我有一个有效的JSON响应，其代码如下：

在我的HTML中，我有：

<ol id="selectable"></ol>

在javascript中我有：

<script type="text/javascript">
// json response ...
if (response.success) {
    $.each(response.data.photos, function(i,photo){
        $("<img/>").attr("src", photo.image_url).appendTo("#selectable");
        if ( i == 20 ) return false;
    });       
}

这给了我：

<ol id="selectable">
    <img src="a.jpg">
    <img src="b.jpg">
    <img src="c.jpg">               
</ol>

但我想要的是这样一个列表：

<ol id="selectable">
    <li><img src="a.jpg"></li>
    <li><img src="b.jpg"></li>
    <li><img src="c.jpg"></li>
</ol>

Answer 1

试试这个：

$("<img/>").attr("src", photo.image_url).wrap('<li>').appendTo("#selectable");

Answer 2

使用

("#selectable").append("<li><img src = "+photo.image_url+" /></li>");

而不是

$("<img/>").attr("src", photo.image_url).appendTo("#selectable");