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

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.5s, затем удалил highlighted класс из всех элементов внутри news элемент и заменить его simple,

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

Если вы хотите, чтобы они выполнялись по одному, с интервалом 4,5 с, это выглядело бы так.

<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>

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

<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

"или заменить классы 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() в петле.

Answer 3

Кэш this, избавляться от onload:

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

DEMO