将卡片样式应用于单个Google Feed API结果

Applying Card style to individual Google Feed API result

本文关键字：Google Feed API 结果 单个 应用于 样式      更新时间：2023-09-26

我使用的是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>

然后在body中我有:

<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;
}

我得到的不是让样式应用于每个提要结果，而是一个样式正确的框，但它包含了里面的所有提要。

如何将样式应用于每个单独的提要结果，而不是所有的提要结果?

基本上你选择了一个单一的DOM元素，然后试图追加它，但它是一个单一的元素。

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

不需要jQuery，它只是更快。

相关文章：