<hr> между divs

Question

Основываясь на времени, я показываю divs один за другим.

я сделать это с помощью JQuery с

$("#section_"+index).show(); 

Мои дивы имеют идентификаторы, как: section_1, section_2, section_3 и т.д.

я есть УАК currentSection который является идентификатор последнего, который показано на рисунке. Теперь я хочу hr (горизонтальная линейка) между последней показанной и предыдущей. И если он показывает следующий, старый hr должен быть удален и должен быть показан новый hr.

Можно ли это сделать с помощью jquery?

Answer 1

В вашем CSS, добавьте:

.latest { 
    border-top: 1px solid #888; 
} 

В ваших JS измените вы показываете заявление:

$('.latest').removeClass('latest'); 
$("#section_"+index).addClass('latest').show(); 

Answer 2

В дополнение к techfoobar's answer, вы могли бы сделать что-то вроде этого:

$.fn.showNext = function(selector, delay) { 
    var previous = this; 
    var next = this.next(); 

    if (next.length > 0) { 
     setTimeout(function() { 
      previous.removeClass('latest'); 
      next.addClass('latest').show().showNext(selector, delay); 
     }, delay); 
    } 
}; 

$('.section').first().show().showNext('.section', 2000); 

Таким образом, вам не нужны эти нецелесообразные индексы section_n. Демо-версия here on JSFiddle.