如何将交替类添加到缩略图图像的动态提要?
问题描述:
我通过两个名为jYoutube和jGFeed的插件将一个YouTube用户视频频道的订阅源带到一个页面上。如何将交替类添加到缩略图图像的动态提要?
jGFeed:http://archive.plugins.jquery.com/project/jgfeed
jYoutube:http://archive.plugins.jquery.com/project/jyoutube
我陷入为什么这是不工作...我认为这将是一个简单的if/else语句一样简单,但它不工作。
jQuery(document).ready(function($) {
$.jGFeed('http://gdata.youtube.com/feeds/base/users/POTATOwillEATyou/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile',
function(feeds){
// Check for errors
if(!feeds){
// there was an error
return false;
}
var html = '';
// do whatever you want with feeds here
for(var i=0; i<feeds.entries.length; i++){
var entry = feeds.entries[i];
//My attempt at alternating classes:
if((i%2) == 0)
{
console.log('hello')
$(".thethumb").addClass("even");
}
else
{
console.log('NOPE')
$(".thethumb").addClass("odd");
}
//End of my attempt
html += '<a rel="vidbox" class="thethumb" target="_blank" href="' + entry.link + '" title="' + entry.title + '"><img src="' + $.jYoutube(entry.link, 'small') + '" class="thumb left"></a>';
}
$('#you_tube_feed').html(html);
}, 25);
});
答
您的问题是,你正在改变类的所有.thethumb
,他们不会在你运行该代码时存在(他们是你的HTML字符串内)
for(var i=0; i<feeds.entries.length; i++)
{
var entry = feeds.entries[i];
var $new = $('<a rel="vidbox" class="thethumb" target="_blank" href="' + entry.link + '" title="' + entry.title + '"><img src="' + $.jYoutube(entry.link, 'small') + '" class="thumb left"></a>');
if((i%2) == 0)
{
$new.addClass("even");
}
else
{
$new.addClass("odd");
}
$('#you_tube_feed').append($new);
}
+1
谢谢。像魅力一样工作。 – 2013-04-04 16:49:49
答
由于您使用的是JQuery,所以它更加简单。 。 。加上所有的缩略图,然后再回去使用:even
和:odd
选择一次全部添加类:
$('.thethumb:even').addClass('odd');
$('.thethumb:odd').addClass('even');
你会注意到,类相比,选择切换。 。 。这是因为JQuery选择器是基于0的,所以项目“0”,“2”,“4”等实际上是选择中的第1,2,5等项目。
你的结果是什么 – smerny 2013-04-04 16:05:12
我的结果是交替控制台日志说hello和nope,但没有类添加到.ththumb。 – 2013-04-04 16:09:11