1

所以我按照这里的指南使用 Google Feed API

我的 HTML 头包含以下内容：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("feeds", "1");
    function initialize() {
        var feed = new google.feeds.Feed("http://feeds.ign.com/ign/game-reviews");
        feed.setNumEntries(20);
        feed.load(function (result) {
            if (!result.error) {
                var container = document.getElementById("feed0");
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    var card = document.getElementById("card");
                    card.appendChild(document.createTextNode(entry.title));
                    card.appendChild(document.createTextNode(entry.contentSnippet));
                    card.appendChild(document.createTextNode(entry.link));
                    container.appendChild(card);
                }
            }
        });
    }
    google.setOnLoadCallback(initialize);
</script>

然后在我的身体里：

<article id="feed0">
    <div id="card"></div>
</article>

我正在尝试将每个提要条目单独设置为我的 CSS 中的一张“卡片”，最终目标是创建类似于 Google+ 提要的内容：

#feed0, #feed1{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
}
#card{
    border:1px solid gainsboro;
    background-color:white;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
    font:10px Tahoma;
    margin:8px;
    padding:15px;
}

我得到的不是将样式应用于每个提要结果，而是一个样式正确的框，但其中包含所有提要。

如何将样式应用于每个单独的提要结果，而不是全部应用到一起？

4

1 回答 1

0

基本上，您选择的是单个 DOM 元素，然后尝试附加它，但它是单个元素。

这是我的例子，我使用 jquery 和 Array.forEach 来简化： http ://cdpn.io/HLJqd

jQuery 不是必需的，它只是快了很多。

于 2014-05-23T22:03:34.380 回答