Как я могу вставить изображение в список изображений, извлекаемых из API с помощью jQuery? - PullRequest
Новая
       10

Как я могу вставить изображение в список изображений, извлекаемых из API с помощью jQuery?

1 голос
/ 18 августа 2011

При просмотре этого URL http://dl.dropbox.com/u/1550420/jquery/flickr.html, мы видим список изображений, извлекаемых из API (flickr).

Я бы хотел вставить следующее изображение http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg в 3-ю позицию моего списка, увеличив таким образом длину моего списка.

Таким образом, в списке будет 1 изображение, вставленное в 3-ю позицию. Изображение будет получено из уникального URL, а не из того же API.

Как мне это сделать?

Вот мой код, в случае, если ссылка выше не работает: 

<script>
    $(document).ready(function() {
        $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
          $.each(data.items, function(){
            var raffie = '<a href="' + this.link + '"></a>';
            $('<li></li>')
            .append(raffie)
            .appendTo('#pic');
            $('<img />').attr('src', this.media.m)
            .appendTo('#pic');
          });
        });
    });
</script>

и вот жестко запрограммированный html из тела: 

<ul><li id="pic"></li></ul>

Ответы [ 2 ]

1 голос
/ 18 августа 2011

После того, как вы закончите добавлять все ваши изображения в DOM, вы должны выбрать второе изображение и вставить другое изображение после него: 

$('#pic img:eq(1)').after('<li><img src="http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg" /></li>');

Вот скрипка: http://jsfiddle.net/LbtWJ/.

P.S. Вы не должны добавлять свои изображения в DOM отдельно, но это не главное.

0 голосов
/ 18 августа 2011

В вашем коде это выглядит как добавление li в другой li, что недопустимо.

Как насчет этого.Разметка выглядит следующим образом: (<li> на самом деле не требуется, поскольку мы перезаписываем ее, но так проверяется страница) 

<ul id="pic"><li></li></ul>

Тогда код JS выглядит следующим образом: 

<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data)
        {
            var html = '';
            $.each(data.items, function()
            {
               // Avoid appending to document DOM multiple times to improve performance
               html += '<li><a href="' + this.link + '"><img src="' + this.media.m + '"/></a></li>')
            });
            // 3rd hardcoded image
            html += '<li><a href="#"><img src="http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg"/></a></li>';

            // Now put it into the page
            $('#pic').html(html);
        });
    });
</script>
...