如何将此 JSON 文件中的图像正确附加到正确的 div 中答案

【问题标题】：How can I append the images from this JSON file properly into the correct divs如何将此 JSON 文件中的图像正确附加到正确的 div 中
【发布时间】：2015-10-01 04:56:01
【问题描述】：

我正在制作 Instagram 网页克隆，并且我已经构建了所有内容。我可以从 JSON 文件中检索数据并将其添加到 <img> 标记，但我需要将每个图像显示在其自己的 .below-image div 版本之上。我知道我需要以某种方式将.below-image 部分附加到放置在#images div 中的每个图像上，我已经这样做了，但是无论出于何种原因，我似乎无法弄清楚如何分隔每个图像以便每个项目之间有一致的间距。

我还创建了一个https://jsbin.com/zagejacowe/edit?output

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>Instagram Feed</title>
    <link rel="stylesheet" href="feedstyle.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type='text/javascript' src='feed.js'></script>

  </head>

  <body>

    <header>
      <div class="top">
        <!-- <div id="home-button">
          <i class="fa fa-home fa-2x"></i>
        </div>
        <div id="logo">
          <img src="http://i.imgur.com/SmdPZ6T.png" />
        </div>
        <div id="profile-photo">
          <img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
        </div> -->
        <ul>
          <li><i class="fa fa-home fa-2x"></i></li>
          <li id="logo">
            <img src="http://i.imgur.com/SmdPZ6T.png" />
          </li>
          <li id="profile-photo">
            <img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
            <p class="username">username</p>
          </li>
        </ul>

      </div>
    </header>


    <div id="container">
      <main>
        <div id="feed-container">
          <div id="feed-posts">
            <div id="images">
              <!-- <ul>
                <li>
                  <img src="http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg" />
                </li>
                <div class="below-image">
                  <div class="like">
                    <i class="fa fa-heart fa-2x"></i>
                  </div>
                  <div class="image-info">
                    <p>User Info</p>
                  </div>
                  <div class="more">
                    <button>···</button>
                  </div>
                  <div id="clear"></div>
              </ul>
              <div id="add-a-comment">
                <div class="comment-container">
                  <form class="comment" action="index.html" method="post">
                    <input type="text" name="name" value="" placeholder="Add a comment...">
                  </form>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </main>
  </div>
</body>
</html>

CSS

* {
  margin: 0px;
  padding: 0px;
}
body {
  font-family: "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
ul {
  list-style: none;
}
li {
  list-style: none;
}
#container {
  margin: 0 auto;
  display: block;
}
header {
  margin: 0 auto;
  display: block;
  background-color: #3E6D93;
  height: 50px;
}
.top {
  background: #467ea6;
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.01, #467ea6), to(#27608c));
  background: -webkit-linear-gradient(#467ea6 1%, #27608c 100%);
  background: -moz-linear-gradient(#467ea6 1%, #27608c 100%);
  background: -o-linear-gradient(#467ea6 1%, #27608c 100%);
  background: linear-gradient(#467ea6 1%, #27608c 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#467ea6', endColorstr='#27608c', GradientType=0);
  width: 100%;
}
.top li {
  display: inline-block;
  margin: 0 auto;
}
#home-button, .fa-home {
  float: left;
  background-color: #305F87;
  color: #ccc;
  padding: 7px;
  margin-left: 200px;
  width: 35px;
}
.fa-home {
  padding-left: 12px;
}
#logo img {
  float: right;
  width: 110px;
  margin-left: 400px;
  padding: 6px;
}
#profile-photo  {
  float: right;
  margin-right: 200px;
  padding: 10px;
  border-left: 1px solid #305F87;
  border-right: 1px solid #305F87;
  width: auto;
}
#profile-photo img  {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
#profile-photo p {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  float: right;
  margin-left: 10px;
  padding: 5px;

}
#feed-container {
  background-color: #DFDFDF;
  width: 650px;
  height: auto;
  margin: 0 auto;
  display: block;
}
#feed-posts {}
#images {
  margin: 0 auto;
  display: block;
}
#images img {
  margin: 0 auto;
  display: block;
  width: 550px;
  height: 550px;
}
.below-image {
  margin: 0 auto;
  display: block;
  width: 550px;
  height: 52px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.like {
  float: left;
}
.fa-heart {
  color: #5a5a5a;
  padding: 10px;
  border-right: 1px solid #ccc;
}
.image-info {
  float: left;
  text-align: left;
  width: 437px;
  height: 52px;
  border-right: 1px solid #ccc;
}
.image-info p {
  color: #467ea6;
  font-weight: bold;
  padding-top: 15px;
  padding-left: 20px;
  float: left;
}
.more {
  float: right;
  color: #5a5a5a;
}
.more, button {
  display: inline-block;
  font-size: 45px;
  color: #5a5a5a;
  padding: 0 5px;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}
#clear {
  clear: both;
}
.comment-container {
  width: 550px;
  height: 200px;

}

#add-a-comment {
  margin: 0 auto;
  display: block;
  background-color: #fff;
  width: 550px;
  height: auto;
  margin-bottom: 50px;
}
#add-a-comment p {
  margin: 0 auto;
  display: block;
}
#add-a-comment input[type=text] {
  width: 550px;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px;
  padding: 15px;
  outline: none;
}
input, select, textarea{
  color: #f00;
}

JQUERY

 var bottom =    '<div class="below-image">' +
                '<div class="like">' +
                  '<i class="fa fa-heart fa-2x"></i>' +
                '</div>' +
                '<div class="image-info">' +
                  '<p>User Info</p>' +
                '</div>' +
                '<div class="more">' +
                  '<button>···</button>' +
                '</div>' +
                '<div id="clear"></div>' +
              '</ul>' +
                '<div id="add-a-comment">' +
                  '<div class="comment-container">' +
                    '<form class="comment" action="index.html" method="post">' +
                      '<input type="text" name="name" value="" placeholder="Add a comment...">' +
                    '</form>' +
                  '</div>' +
                '</div>' +
              '</div>';



$(document).ready(function() {
  var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
  $.getJSON(jsonURL, function(json) {
    var imgList = "";
    //var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";

    $.each(json, function() {
      imgList += '<li><img class="inserted" src= " ' + this + ' "></li>' + bottom; 
    });
    $('#images').append(imgList);
  });
});

【问题讨论】：

是的，这会将该部分正确地附加到页面底部，但我需要将此 .below-image 部分附加到每个 <img> 标记。 :(
您知道id 应该是唯一的吗？现在，您正在为每个图像添加一个 id 等于 images 的 div 元素。
对不起，这不是我的意图。我对 JQuery 不是很好。我只是想使用id #images 将所有图像附加到div 中，然后让每个图像将html 的.below-image 部分附加到所述图像。最好的方法是什么？

标签： javascript jquery html css json

【解决方案1】：

如果您将 foreach 循环更改为这个，它应该可以工作：

$.each(json, function(i) {
  imgList += '<ul><li><img class="inserted" src= " ' + json[i] + ' "></li>' + bottom; 
});

这里是 jsfiddle (+update)：http://jsfiddle.net/bg3x0k7n/1/

【讨论】：

谢谢！它有效，但与我目前所拥有的完全一样。您是否能够使用您的解决方案分离所有图像和 div？
你能解释一下你所说的seperate是什么意思吗？
哦，我在您的 html 中看到了一个错误。你应该在每张图片的开头放一个
当然。目前所有的图像以及每个或below-image 部分都被粉碎在一起并重叠。我终其一生都想不出如何将它们分开。我确定这是小问题，但我找不到问题所在。
啊！我刚看到你的更新。谢谢！我知道这是一件微不足道的事情。你太棒了！