使用jQuery创建/显示数组结果

时间:2011-03-27 21:13:03

标签: jquery arrays jquery-plugins rss

我目前正在开发一个网络应用程序,并使用jGFeed从我的博客中提取RSS源。 (最后,我将使用jQTouch来构建UI。)我能够获取我需要的内容,现在我只需要进行下一步。

我需要做的是,首先显示一个链接列表。这些链接是每个条目的标题。当用户单击此链接时,将显示此特定条目的内容供用户阅读。

我没有这方面的经验,所以我很自豪能够达到这一点。但是现在我需要把它提升到一个新的水平,并且可以使用一些关于使用数组的指导并让它在jQuery中工作。任何建议或例子将不胜感激。

这是我的代码:

<html>
<head> 
<title>TEST APP</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.jgfeed-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $.jGFeed('http://feeds.feedburner.com/solidverbal/clickchorus/app', function(feeds){
        // Check for errors
        if(!feeds){
        // there was an error
        return false;
        }
        // do whatever you want with feeds here
        var title = "";
        var content = "";
        for(var i=0; i<feeds.entries.length; i++){
            var entry = feeds.entries[i];
            // Entry title
            title = title + "<li id=\"title\"" + i + ">" + entry.title + "</li>";
            // Entry content
            content = content + "<li id=\"content\"" + i + ">" + entry.content + "</li>";
        }
        $("#results_titles").html("<ul>" + title + "</ul>");
        $("#results_content").html("<ul>" + content + "</ul>");

    }, 10);
});
</script>

</head> 
<body> 

<div id="results_titles">LOADING</div>
<div id="results_content">LOADING</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

据我所知,你想在数组中存储那些feeds.entries,即使它们已经在数组中。 feeds.entries是你想要的数组。所以feeds.entries [0] .title是你需要的标题,feeds.entries [0] .content是内容。尝试做这样的事情:

//Create the <ul><li><a></a></li></ul> structure links
var sAnchors='<ul>';
for(var i=0; i<feeds.entries.length; i++){
   var sAnchors += "<li><a href='#link' id='title_"+i+"' class='giveFeeds'>feeds.entries[i].title</a></li>";
}
sAnchors += '</ul>';

//Append the <a>.
$('#results_titles').append(sAnchors);

//When the user clicks on the giveFeeds link....
$('.giveFeeds').live('click', function(e) {
//Get the feed number
var tmpId = $(e.target).attr('id');
//Returns the value after the '_' char and make sure it returns de number.
var id = parseInt(tmpId.split('_')[1]);
//Use the id value to get the desired feed
var wantedFeed = feeds.entries[id].content;
//Then do whatever you want with that entry
... 
});

您可能会遇到诸如feeds.entries之类的变量问题,因为您希望它是全局变量。我建议你在“for”循环中将所有的feed添加到单独的(sDivs ='“+”+ feeds.entries [i] .content +“”;)。就像这样,你只需要使用id var(var id) = parseInt(...))知道你想要显示什么($('#content'+ id).show())。最后,你可能想选择添加一些动画来使这更有趣(slideUp,slideDown,动画)通过网络查看这些方法。