将JSON检索到的图片网址放在其中 <li> 标签

Question

I have a working JSON response with the following code:

In my html, I have:

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

In javascript I have:

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

This gives me:

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

But what I want is a list like this:

<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

use

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

instead of

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