Question

I am playing with some JSON data. With following JavaScript, I can retrieve some links.

(function() {
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickrAPI, {
    id: "132455232@N07",
    lang: "en-us",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        console.log(data.items[i]['link']);
        if ( i === 5 ) {
          return false;
        }
      });
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

And with the following JavaScript I can get some images:

(function() {
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickrAPI, {
    id: "132455232@N07",
    lang: "en-us",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 5 ) {
          return false;
        }
      });
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
  img {
    height: 159px;
    float: left;
    margin: 10px;
  } 
</style>

<div id="images"></div>

Well I am beginner to jQuery, I have tried looking in jQuery docs about this problem but wasn't successful how to achieve it. I also tried doing it myself but was in vain.

Actually what I am trying to do is wrapping the image inside with the anchor, whose href being the links I am getting from first code.

Code in both the example are same except one line. I know my expected solution will also will be of one line merging both different lines.

Answer 1

查看wrap函数（http://api.jquery.com/wrap/），其功能与其名称完全相同。它用任何html包装元素。

检查您编辑过的代码，我创建了一个名为link的新变量（其创建方式与创建图像的方式相同），并在将图像附加到#images后调用wrap(link)。

我认为由于性能损失，这不是一个坚如磐石的解决方案。您可以（并且应该）使用字符串创建一个数组，并将其一次性写入DOM。

(function() {
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickrAPI, {
    id: "132455232@N07",
    lang: "en-us",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        var image = $( "<img>" ).attr( "src", item.media.m )
        var link = $("<a>").attr("href", "//example.org");
        image.appendTo( "#images" ).wrap(link);
        if ( i === 5 ) {
          return false;
        }
      });
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
  img {
    height: 159px;
    float: left;
    margin: 10px;
  } 
</style>

<div id="images"></div>

这是保存一些迭代的更好解决方案：

(function() {
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickrAPI, {
    id: "132455232@N07",
    lang: "en-us",
    format: "json"
  })
    .done(function( data ) {
      var imagesHTML = [];
      $.each( data.items, function( i, item ) {
        imagesHTML.push([
            "<a href='" + "http://example.org" + "'>",
                 "<img src='" + item.media.m + "'>",
            "</a>"
        ].join(""));
        if ( i === 5 ) {
          return false;
        }
      });
      $("#images").html(imagesHTML.join(""));
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
  img {
    height: 159px;
    float: left;
    margin: 10px;
  } 
</style>

<div id="images"></div>

这是将DOM交互最小化到最低限度的好方法，因为它太慢了。在你的情况下，这并不重要，但一般来说使用高性能代码是个好习惯。

Answer 2

 $.each( data.items, function( i, item ) {
    var img = $( "<img>" ).attr( "src", item.media.m );
    var a= $( "<a>" ).attr( "href", item.media.m );
    img.appendTo(a);
    a.appendTo( "#images" );
    if ( i === 5 ) {
      return false;
    }
  });

在href中查找结果中的正确值。

Answer 3

这是一种做法：

(function() {
    var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickrAPI, {
    id: "132455232@N07",
    lang: "en-us",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        var html = '<a href="'+ item.media.m +'"><img src="'+ item.media.m  +'"/></a>';
        $(html).appendTo( "#images" );
        if ( i === 5 ) {
          return false;
        }
      });
    });
})();

您可以在字符串中形成HTML，并将其传递给jQuery。

Answer 4

你能使用.append（）吗？

.done(function( data ) {
  $.each( data.items, function( i, item ) {
    $( "#images" ).append('<a href="###YOURLINKHERE###"><img src="' + item.media.m + '" /></a>';
    if ( i === 5 ) {
      return false;
    }
  });
});

如何在<a> with jQuery?

4 个答案: