javascript - 如何使用 jQuery 在 <a> 中插入 <image>？

Question

我正在玩一些 JSON 数据。使用以下 JavaScript，我可以检索一些链接。

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

通过以下 JavaScript，我可以获得一些图像:

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

嗯，我是 jQuery 的初学者，我曾尝试在 jQuery 文档中查找有关此问题的信息，但没有成功解决该问题。我自己也尝试过，但没有成功。

实际上我想做的是用 anchor 将图像包裹在里面， anchor 的 href 是我从第一个代码获得的链接。

除了一行之外，两个示例中的代码相同。我知道我预期的解决方案也将是一条线合并两条不同的线。

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 交互降至最低限度的好方法，因为它太慢了。在您的情况下这无关紧要，但通常使用高性能代码是一个好习惯。