Как добавить чередующиеся классы в динамическую подачу миниатюр?

Question

Я привожу канал видеоканала пользователя youtube на страницу через два плагина, называемые jYoutube и jGFeed.

jGFeed: http://archive.plugins.jquery.com/project/jgfeed
jYoutube: http://archive.plugins.jquery.com/project/jyoutube

Я застревать почему это не работает ... Я думал, что это будет так легко, как простой, если/другое заявление, но он не работает ,

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

Answer 1

Ваш вопрос в том, что вы меняете класс всех .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); 
} 

Answer 2

Поскольку вы используете JQuery, это еще проще. , , добавить все эскизы, а затем вернуться обратно использовать :even и :odd селекторы, чтобы добавить классы все сразу:

$('.thethumb:even').addClass('odd'); 
$('.thethumb:odd').addClass('even'); 

Вы заметили, что классы переключаются по сравнению с селекторов. , , это потому, что селектор JQuery основан на 0, поэтому элементы «0», «2», «4» и т. д. фактически являются элементами 1, 2, 5 и т. д. в выборе.