jQuery를 사용하여 API에서 가져온 이미지 목록에 이미지를 삽입하려면 어떻게해야합니까?

Question

이 URL을 볼 때 http://dl.dropbox.com/u/1550420/jquery/flickr.html은 API (flickr)에서 가져온 이미지 목록을 볼 수 있습니다.

내 목록의 세 번째 위치에 다음 이미지 http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg을 삽입하여 내 목록의 길이를 늘리고 싶습니다.

요약하면 목록의 이미지는 세 번째 위치에 삽입됩니다. 이미지는 동일한 API가 아닌 고유 한 URL에서 가져온 것입니다.

어떻게하면됩니까? 여기

이 경우 위의 링크가 작동하지 않는, 내 코드입니다 :

<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> 

Answer 1

이 완료되면 마크 업은 다음과 같습니다 DOM에 모든 이미지를 추가하면, 당신은 두번째 이미지를 선택하고, 이후에 다른 이미지를 삽입해야합니다 http://jsfiddle.net/LbtWJ/ :

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

는 여기에 바이올린입니다.

P. 별도로 이미지를 DOM에 추가해서는 안되지만 요점을 제외하고는

Answer 2

li을 다른 li에 추가하는 것 같습니다. 허용되지 않습니다.

어때? 그런 다음 JS 코드는 다음과 같습니다

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

을 (우리가 그것을 덮어 쓰기 때문에 <li> 정말 필요하지 않지만 이런 식으로 페이지의 유효성을 검사) :

<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>