Как заменить некоторые имена классов другими и показать эти изменения специально?

Question

<ul> имеет много <li> предметов, которые какая-то часть из них являются highlighted и другие simple:

<ul class="news"> 
     <li class="highlighted">Item 1</li> 
     <li class="highlighted">Item 2</li> 
     <li class="simple">Item 3</li> 
     <li class="highlighted">Item 4</li> 
     <li class="simple">Item 5</li> 
     <li class="simple">Item 6</li> 
     <li class="highlighted">Item 7</li> 
     <li class="simple">Item 8</li> 
     //...etc.. 
</ul> 

мне нужно, когда эта страница загрузки, чтобы установить все highlighted элементы в simple.

Если это возможно, чтобы показать измененные предметы специально для удара. Как fadeOut() или замените классы 2 раза, в конце, установите все элементы в simple класс.

Я попытался, как это, но не работает:

$(document).ready(function() { 
    $('.news').onload(function() { 
     $(this).find(".highlighted").each(function() { 
      setTimeout(function() { 
       $(this).removeClass('highlighted'); 
      }, 4500); 
      $(this).addClass("simple"); 
     }); 
    }); 
}); 

Answer 1

Следующие будут ждать 4.5 с, а затем удалить класс highlighted из всех элементов в пределах элемента news и заменить его на simple.

<script type="text/javascript"> 
    $(document).ready(function() { 
     setTimeout(function() { 
      $('.news > .highlighted').toggleClass('highlighted simple'); 
     }, 4500); 
     });  
    }); 
</script> 

Если вы хотите, чтобы они выполнялись по одному за раз, это было бы похоже на 4.5s.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.news > .highlighted').each(function(i) { 
      var $self = $(this); 
      setTimeout(function() { 
       $self.toggleClass('highlighted simple'); 
      }, (i + 1) * 4500); 
     });  
    }); 
</script> 

Если вы хотите Fade Out эффекта затем исчезают в с другим взглядом, который мог бы выглядеть

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.news > .highlighted').each(function(i) { 
      var $self = $(this); 
      setTimeout(function() { 
       $self.fadeOut(function() { 
         $self.toggleClass('highlighted simple') 
          .fadeIn(); 
       }); 
      }, (i + 1) * 4500); 
     });  
    }); 
</script> 

Answer 2

Cache this, избавиться от onload:

$(document).ready(function() { 
    $('.news').find(".highlighted").each(function() { 
     var $that = $(this); 
     setTimeout(function() { 
      $that.removeClass('highlighted'); 
     }, 4500); 
     $that.addClass("simple"); 
    }); 
}); 

DEMO

Answer 3

"или заменить классы 2 раза , в конце, установите все элементы в простой класс. "

Что-то вроде этого:

$(document).ready(function() { 
    var $lisToChange = $("ul.news li.highlighted"); 
    for (var i = 0; i < 3; i++) 
     setTimeout(function() { 
      $lisToChange.toggleClass('highlighted simple'); 
     }, i * 500 + 500); 
}); 

Демо: http://jsfiddle.net/Ex6tw/1

То есть, получить ссылку на только элементы, которые необходимо будет изменить ($lisToChange в моем коде), а затем установите переключатель в классы только по этим элементам. Чтобы обратить внимание на изменение, сделав это несколько раз, просто используйте setTimeout() в цикле.