使用Firebase一个接一个地显示多个对象

Question

编辑了一下，尝试更好地解释

我有一个问题，我不知道如何开始解决问题。这也很难解释。 基本上，我在Firebase中有一个存储位置，如下所示：

（在此图片中，它只显示一个存储位置。后来又有一个标题为“测试”，另一个标题为“你可以看到，这会弄乱”） 我想要做的就是当我使用这段代码时：

html文件：

<div class="span8" id="verticalLine">
        <h2 id="main-header"><center>Latest news</center></h2>
        <div id="newsDivHead"></div>
        <br/>
        <div id="newsDiv"></div>
        <script>
        var newsData = new Firebase("https://agn.firebaseio.com/web/news/mc/")
        newsData.limit(10).on('child_added', function (snapshot) {
            var message = snapshot.val();
            $('<div/>').text(message.body).appendTo($('#newsDiv'));
            $('<div/>').text(message.title).appendTo($('#newsDivHead'));
            $('#newsDiv')[0].scrollTop = $('#newsDiv')[0].scrollHeight;
        });
        </script>
        <!---
            $('<div/>').text(message.body).prepend($('<em/>')
            .text(message.title+': ')).appendTo($('#newsDiv'));
        $('#newsDiv')[0].scrollTop = $('#newsDiv')[0].scrollHeight;
        });
        --->
    </div>
</div>

我希望它能得到这样的结果：

注意标题和休息的格式。 但不幸的是它出现了这样：

我想要发生的是它格式化message.title中存储的值，使其显示在message.body上方，并以格式（或类似内容）格式化。我已经意识到使用两个div标签是不可能的，我只能使用一个。
那我该怎么办？这甚至可能吗？标题和文本位于'varibles'（firebase ref）message.title和message.body respectivley中（正如您在代码中看到的那样）。 任何帮助都很高兴赞赏！

Answer 1

这与Firebase没有任何关系，而是一个HTML问题。 HTML中有两个div，一个用于显示标题，另一个用于显示内容。不要这样做并使用CSS类，而不是在视觉上将标题与文本分开。

<div class="span8" id="verticalLine">
    <h2 id="main-header"><center>Latest news</center></h2>
    <div id="content">
    </div>
</div>

var newsData = new Firebase("https://agn.firebaseio.com/web/news/mc/")
newsData.limit(10).on('child_added', function (snapshot) {
  var message = snapshot.val();
  var body = $('<div/>').class('body').text(message.body);
  var title = $('<div/>').class('title').text(message.title);
  $('<div/>').append(title).append(body).appendTo($('#content'));
});

在您的CSS中，为您的'newsDiv'和'newsDivHead'ID设置类'body'和'title'的样式：

.body {
  font-size: 12px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}