for 循环中的 for 循环不适用于循环的正确迭代
For loop in a for loop doesn't apply to the correct iteration of the loop?
我有一个脚本,可以提取我的Tumblr提要,然后输出5个最新帖子。我遇到的问题是标签数组的循环。循环有效,但它将标签应用于 post 循环的第一次迭代,而不是标签实际所属的迭代。任何想法如何将帖子标签"锁定"到正确的帖子?
帖子循环通过检查body_abstract来确定文本类型的帖子是否具有"阅读更多"链接。然后它构建帖子。 然后它应该将标签放在它们所属的位置。在返回中,我目前有五个带有标签的帖子之一,这是第三个帖子,但标签不断被修改为第一篇文章。 想法?
for(i=0; (i < data.response.total_posts) && (i < 5); i++){
if (data.response.posts[i].type == "text"){
if (data.response.posts[i].hasOwnProperty('body_abstract')){
$('article').append(
'<div class="blogtitle">'
+ '<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags">'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>');
if (data.response.posts[i].tags.length == 0){
$('#tags').append('<p>No Tags</p>');
}
else {
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags').append(
'<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> '
);
};
};
}
else {
$('article').append(
'<div class="blogtitle">'
+ '<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags">'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>');
if (data.response.posts[i].tags.length == 0){
$('#tags').append('<p>No Tags</p>');
}
else {
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags').append(
'<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> '
);
};
};
};
这种行为是因为使用 ID 选择器的 $("#tags") 只返回相同 ID 的第一个元素因此,您需要做的是为每个标签 DIV 指定一个特定的 ID,并使用 ID 选择器来定位正确的 DIV 元素(您的标签容器)。
for(i=0; (i < data.response.total_posts) && (i < 5); i++){
if (data.response.posts[i].type == "text"){
if (data.response.posts[i].hasOwnProperty('body_abstract')){
$('article').append(
'<div class="blogtitle">'
+ '<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags_"'+i+'>'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>');
if (data.response.posts[i].tags.length == 0){
$('#tags_'+i).append('<p>No Tags</p>');
}
else {
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags_'+i).append(
'<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> '
);
};
};
}
else {
$('article').append(
'<div class="blogtitle">'
+ '<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags_'+i+'">'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>');
if (data.response.posts[i].tags.length == 0){
$('#tags_'+i).append('<p>No Tags</p>');
}
else {
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags_'+i).append(
'<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> '
);
};
};
};
$('article')
将创建一个围绕页面上所有article
元素包装的jQuery对象。如果随后调用 append
并传入标记(字符串),则该标记定义的元素将追加到其中每个元素。也就是说,如果我有:
<div></div>
<div></div>
<div></div>
。并做$("div").append("<span>Hi</span>")
,我最终会得到:
<div><span>Hi</span></div>
<div><span>Hi</span></div>
<div><span>Hi</span></div>
如果要定位特定元素,可以使用.eq(x)
或:eq
仅匹配特定元素。 例如,$('article').eq(0)
给你一个只有第一个article
的jQuery对象,就像$('article:eq(0)')
一样。
旁注:您不要将;
放在块之后,例如附加到if
、else
、for
等的块。
你有一个错误,你需要在 for 循环之外以如下方式声明变量 "tagLinks":
var tagLinks = [];
for (j=0; j < data.response.posts[i].tags.length; j++){
var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-");
tagLinks.push(dashedTag);
$('#tags').append('<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a> ');
};
相关文章:
- 为什么JavaScript在for循环为3时向所有4发出警报
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 我的javascript for循环不起作用
- For循环冻结Javascript
- 如何在for循环中添加事件侦听器
- 双“for”循环(循环)
- javascript for循环不起作用
- for循环中的javascript if语句找不到==
- Javascript在for循环中等待处理请求
- 我没有'I don’我不理解for在循环中的用途
- 为什么在 Javascript 中使用空的 for 循环 - for(;;).
- 错误后如何停止循环“FOR”
- 如何使用循环 for 与 java 脚本一起检查输入中的值
- 如何正确使用ngRepeat,同时使用循环for
- 是否可以使用循环(for/while)来制作动画?
- 在循环for循环时如何进入和退出
- Javascript原型循环for in数组
- 在对象数组中循环for
- Javascript循环:for循环工作,但不能映射
- 如何创建一个循环"for"在json