带有 jquery 的 Flickr json 提要答案

【问题标题】：Flickr json feed with jquery带有 jquery 的 Flickr json 提要
【发布时间】：2015-11-23 23:00:25
【问题描述】：

我尝试让 Flickr 提要制作 SPA（单页应用程序）。这很好用。我只是在把我的元素放在好的地方时遇到了一些问题。我的意思是，使用生成的代码，我得到的不是用“p”包围的图像，而是：

<p></p>
<img src="http://farm1.staticflickr.com/702/22578264723_5baef149b4_m.jpg">
<p></p>

这是我的代码：

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>JSON Flickr with JQuery</title>
  <style>
    img {
      height: 100px;
      float: left;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>


  <div id="images"></div>



  <script>
    //$("<table><tbody>").appendTo('#images');
    (function() {
      var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
      //var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json";

      $.getJSON(flickerAPI, {

          tagmode: "any",
          format: "json"
        })
        .done(function(data) {


            $.each(data.items, function(i, item) {

                $("<p>").appendTo('#images');
                $("<img>").attr("src", item.media.m).appendTo('#images');
                $("</p><p><a href=\"" + item.link + "\">" + item.title + "</a></p>").appendTo('#images');
                $("<p>by <a href=\"" + "https://www.flickr.com/people/" + item.author_id + "\">" + item.author + "</a></p>").appendTo('#images');
                $("<p>Tags : " + item.tags + "</p>").appendTo('#images');
                $("<hr>").appendTo('#images');

              }

            );
          }

        );
    })();
    //$("</tbody></table>").appendTo('#images');
  </script>

</body>

</html>

对 "p" 或 "tr" & "td" 有什么想法吗？我认为问题在于我使用 appendTo() 方法的方式。

谢谢

【问题讨论】：

标签： jquery json flickr

【解决方案1】：

因为您要附加一个打开的元素，所以浏览器会为您关闭它，以便 DOM 保持有效。您需要将其保存为变量，然后在添加完所有内容后附加该变量。

$.each(data.items, function(i, item) {
    var $append;
    $append += "<p>";
    $append += "<img src=\"" + item.media.m + "\"/>";
    $append += "</p><p><a href=\"" + item.link + "\">" + item.title + "</a></p>";
    $append += "<p>by <a href=\"" + "https://www.flickr.com/people/" + item.author_id + "\">" + item.author + "</a></p>";
    $append += "<p>Tags : " + item.tags + "</p>";
    $append += "<hr>";
    $('#images').append($append);
});

JSFIDDLE

【讨论】：

谢谢你的回答，现在效果更好了。我刚刚得到“未定义”，所以我不得不初始化var $append="";

【解决方案2】：

感谢您的回答，效果很好，我只需要初始化var $append="";，因为我在每张图片的顶部都“未定义”。我还用 TR 和 TD 替换了 Ps。这是最终代码：

<head>
  <meta charset="utf-8">
  <title>JSON Flickr with JQuery</title>
  <style>
    img {
      height: 100px;
      float: left;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>


  <div id="images"></div>



  <script>

    (function() {
      var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

      $.getJSON(flickerAPI, {

          tagmode: "any",
          format: "json"
        })
        .done(function(data) {


            $.each(data.items, function(i, item) {
                var $append="";
                $append += "<tr><td>";
                $append += "<img src=\"" + item.media.m + "\"/>";
                $append += "</td></tr><tr><td><a href=\"" + item.link + "\">" + item.title + "</a> ";
                $append += " by <a href=\"" + "https://www.flickr.com/people/" + item.author_id + "\">" + item.author + "</a></td></tr>";
                $append += "<tr><td>Tags : " + item.tags + "</td></tr>";
                $append += "<tr><td><hr></hr></td></tr>";
                $('#images').append($append);

              }

            );
          }

        );
    })();

  </script>

</body>

</html>

【讨论】：