简体   繁体   English

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

[英]Creating / Displaying Array Results with jQuery

I'm currently working on a web app and using jGFeed to pull in an RSS feed from my blog. 我目前正在开发一个Web应用程序,并使用jGFeed从我的博客中获取RSS提要。 (Eventually, I'll be pulling in jQTouch to build the UI.) I'm able to grab the content I need, now I just need to do the next step. (最终,我将引入jQTouch来构建UI。)我能够获取所需的内容,现在我只需要执行下一步。

What I need to do is, first, display a list of links. 我需要做的是,首先显示链接列表。 These links are the titles of each entry. 这些链接是每个条目的标题。 When a user clicks on this link, the content for this particular entry is displayed for the user to read. 当用户单击此链接时,将显示该特定条目的内容供用户阅读。

I don't have a ton of experience doing this, so I'm proud to have gotten to this point. 我没有很多经验,因此我很自豪能做到这一点。 But now I need to take it to the next level and could use some guidance on working with arrays and getting this to work within jQuery. 但是现在我需要将它带入一个新的水平,并可以使用一些指导来处理数组并使之在jQuery中起作用。 Any suggestions or examples would be greatly appreciated. 任何建议或示例将不胜感激。

Here is my code: 这是我的代码:

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

From what i understand, you want to stock those feeds.entries in an array even if they already are in an array. 据我了解,即使这些feeds.entries已经存在于数组中,您也希望将它们存储在数组中。 feeds.entries is the array you want. feeds.entries是您想要的数组。 So feeds.entries[0].title is the title you need and feeds.entries[0].content the content. 因此feeds.entries [0] .title是您需要的标题,feeds.entries [0] .content是您的内容。 Try doing something like this: 尝试做这样的事情:

//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
... 
});

You might get some problems with vars such as feeds.entries since you want it to be global. 您可能会遇到vars的一些问题,例如feeds.entries,因为您希望它具有全局性。 I suggest you append all the feeds in seperates in the "for" loop (sDivs = '"+feeds.entries[i].content+"";). Like this, you'll only have to use the id var (var id = parseInt(...)) to know what you wanna show ($('#content'+id).show()). Finally, you might wanna choose to add some animation to make this more interesting (slideUp, slideDown, animate) look out these methods over the net. 我建议您将所有供稿单独添加到“ for”循环中(sDivs ='“ + feeds.entries [i] .content +”“;)。这样,您只需要使用id var(var id = parseInt(...))知道您想要显示的内容($('#content'+ id).show())。最后,您可能想要选择添加一些动画来使其变得更有趣(slideUp,slideDown,动画)通过网络查找这些方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM