Question

我使用append函数将不同的div，图像，链接和文本添加到我的html中。但是，当我这样做时，我从我试图追加的JSON文件中获取的内容被放置在我想要放置的背景之外。这是内容应该是什么样的：

http://i.stack.imgur.com/iShVe.png

当我自己创建这个html内容时，图像和文本被放置在灰色背景上，但当我尝试使用append（）创建所有这些内容时，它将所有内容放在背景的左侧：

如果您需要查看以下内容，我也可以使用以下代码：http://codepen.io/JaGr/pen/XXMPQY

HTML：

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

<div>
  <div class="header">
    <div>
      Camper
    </div>
    <div>
      News
    </div>
  </div>

  <div class="stories">


    <div class="story">
      <img src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png" class="profilePicture">
      <div class="headline"><a href="#">Test Headline</a></div>
      <div class="author"><a href="#">by - TestName</a></div>
      <div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon"> 13</div>
    </div>

  </div>
</div>

的CSS：

body {
  background-image: url("http://s22.postimg.org/bondz7241/grey_wash_wall.png")
}


.header {
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  float: left;
  color: #A9A9A9;
  border-right-style: solid;
  border-bottom-style: solid;
  margin-left: 20px;
  margin-top: 10px;
  padding-right: 135px;
  padding-bottom: 18px; 
  width: 210px;
  margin-bottom: 29px;
}


.story {
  text-align: center;
  float: right;
  background-color: #A9A9A9;
  width: 230px;
  height: 330px;
  margin-bottom: 30px;
  margin-right: 30px;
  box-shadow: 2px 2px 13px;

}

.headline, .author, .likes {
padding-top: 7px;
  font-family: 'Droid Serif', serif;
}
.likes {
  vertical-align:middle
  padding-top: 5px;
}
a {
  text-decoration: none;
  color: #0052cc;
}
.profilePicture {
  width: 230px;
  height: 230px;
}

.heartIcon {
  width: 15px;
  height: 15px;
}

的javascript：

$(document).ready(function() {
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {

    for (var x = 0; x < json.length; x++) {     
      var headline = json[x].headline;
      var headlineLink = json[x].link;
      var authorName = json[x].author.username;
      var authorNameLink = "http://www.freecodecamp.com/" + authorName;
      var authorPicture = json[x].author.picture;
      var likes = json[x].rank;

      if (headline.length > 15) {
          headline = headline.slice(0, 16);
          }


      var divStory = '<div class="story">'
      var profilePic = '<img src="' + authorPicture + '"' + ' class="profilePicture">'
      var divHeadline = '<div class="headline"><a href="' + headlineLink + '">' + headline + '</a></div>'
      var divAuthor = '<div class="author"><a href="' + authorNameLink + '">by - ' + authorName + '</a></div>'
      var divLikes = '<div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon">' + likes + '</div>'
      var lastDiv = '</div>'



      $(".stories").append(divStory, profilePic, divHeadline, divAuthor, divLikes, lastDiv)

    }
  });
});

我认为我的html和css没问题，当我自己键入代码时它可以正常工作;它只是引入问题的javascript。我已经检查了变量和传入的JSON，它们看起来都很好，所以我认为问题只在于append（）本身，但我不知道究竟是什么导致它。

Answer 1

这是jquery附加多个元素。

$(".stories").append(divStory, profilePic, divHeadline, divAuthor, divLikes, lastDiv)

我还没有确切地知道它为什么会产生这个问题，但更改它会解决问题。

$(".stories").append(divStory + profilePic + divHeadline + divAuthor + divLikes + lastDiv)

检查修复here

Answer 2

你曾经使用过devtools吗？（F12）
它们非常实用，您可以第一眼看到您的元素未包含在.story - 标记中。

我这样做：

var tplStory = '\
<div class="story">\
  <img src="{{authorPicture}}" class="profilePicture">\
  <div class="headline"><a href="{{headlineLink}}">{{headline}}</a></div>\
  <div class="author"><a href="{{authorNameLink}}">by - {{authorName}}</a></div>\
  <div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon">{{likes}}</div>\
</div>';

$(".stories").append(
    divStory
    .replace('{{authorPicture}}', authorPicture)
    .replace(...)
)

使用jquery append（）将附加内容放在附加背景之外

2 个答案: