如何将交替类添加到缩略图图像的动态提要？

我通过两个名为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); 
     });

来源

2013-04-04 Jean Hules

你的结果是什么 – smerny 2013-04-04 16:05:12

我的结果是交替控制台日志说hello和nope，但没有类添加到.ththumb。 – 2013-04-04 16:09:11

您的问题是，你正在改变类的所有.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); 
}

来源

2013-04-04 16:09:54

谢谢。像魅力一样工作。 – 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等项目。

来源

2013-04-04 16:15:48 talemyn

如何将交替类添加到缩略图图像的动态提要？

回答

相关问题