firebase - 使用 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 标签是不可能的，我只能使用一个。
那我该怎么办？这甚至可能吗？标题和文本位于“变量”（firebase ref）message.title 和 message.body 中（正如您在代码中看到的那样。）任何帮助都非常感谢！

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 中，设置类 'body' 和 'title' 的样式，就像你当前为你的 'newsDiv' 和 'newsDivHead' IDs 所做的那样：

.body {
  font-size: 12px;
}

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