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

Question

[Nikita_02]

Добрый день, уважаемые друзья!
Необходимо сделать следующее;
Есть такая структура

<div class="news">
	<div class="content-block active">...</div>
	<div class="content-block">...</div>
	<div class="content-block">...</div>
	<div class="content-block">...</div>
</div>

.content-block {
display: none;
}
.content-block.active {
display: block;
}

Как видно, один из дивов активный по умолчанию. Он имеет свойство display: block. У остальных - display: none.
Есть кнопка ".btn-news". При нажатии на нее нужно, чтобы первый див перестал быть активным, а следующий, который идет за ним, стал активным. Т.е. новости как бы пролистываются, но не карусель =)
Подскажите пожалуйста код. Стандартный естественно не подходит...

$(document).ready(function() {
	$(".btn-news").on("click", function(e) {
		e.preventDefault();
		$(".content-block").toggleClass("active");
	});

Перепробовал кучу вариантов, найденных в интернете, ничего так и не заработало. Как я понимаю, копать нужно в этом направлении

var newsTable = $('.news')
var current = newsTable.filter('.active');
                if (current. ... { /* не понимаю, что тут писать */
                    current.removeClass('active').next().addClass('active');
                } else {
                    current.removeClass('active');
                    newsTable.first().addClass('active');
                }

Заранее, спасибо огромное за помощь!!

Answer 1

[Igor Belikov]

Лови :-)

$(function() {
  $('.btn-news').click(function(e) {
    var $current = $('.content-block.active');
    $current.removeClass('active');
    $current.next('.content-block').addClass('active');
  });
});

Comments

[Nikita_02]

Игорь, спасибо большое! Очень помог!
Скажи, пожалуйста, а как зациклить этот процесс? Сейчас, когда доходит до конца, то последний div перестает быть активным и все...
ЗЫ: С понедельника начинаю новую жизнь; начинаю изучать JS. ))

[Igor Belikov]

Нужно проверять - если ли следующий элемент и если его нет, то добавляем класса первому и опять все по новой. :-)

[Nikita_02]

Игорь, пока я смог допереть только до такого:

$('.owl-prev').click(function(e) {
var $current = $('.content-block_desc.active');
$current.removeClass('active');
$current.next('.content-block_desc').addClass('active');

if ( $('.content-block_desc').last().hasClass("active") ) {
$current.removeClass('active');
$('.content-block_desc').first().addClass('active');
}

});

Но, код глючный, когда последний div становится active, первый тоже уже active, т.е. одновременно... Сижу, думаю дальше. =)

[Igor Belikov]

В конце добавьте. :-)

if (!$current.next('.content-block').get(0)) {
$('.content-block:first-child').addClass('active')
}

[Nikita_02]

Игорь, ты просто гуру! Спасибо огромное!!!
Скажи, каких авторов читать? Думаю, мне еще ни раз это пригодится, вызвался делать сайт для школы, где сын учится, называется... ))

[Igor Belikov]

Nikita_02: не за что :-) просто задача не сложная и требуется немного более глубого знания js.
тут очень хорошо расписываются уроки и примеры по anton.shevchuk.name/tag/jquery (и не только по jquery)
habrahabr.ru
javascript.ru

Answer 2

[Albert Kazan]

Через index этого класса при чередования элементов в массиве each лучше будет.