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

Question

[nanny_ogg]

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

<div id="our_team">
    <h3>Категория 1</h3>
    <div class="item" id="item-1"><img src="http://blabla"></div>
    <div class="item" id="item-2"><img src="http://blabla"></div>
    <div class="item" id="item-3"><img src="http://blabla"></div>
    <h3>Категория 2</h3>
    <div class="item" id="item-4"><img src="http://blabla"></div>
    <div class="item" id="item-5"><img src="http://blabla"></div>
    <h3>Категория 3</h3>
    <div class="item" id="item-6"><img src="http://blabla"></div>
    <div class="item" id="item-7"><img src="http://blabla"></div>
    </div>
</div>
<div id="popup-container">
	<div id="popup-image">
		<img>
	</div>
	<a class="navigation close" name="close"><div>Закрыть</div></a>
	<a class="navigation next" name="next"></a>
	<a class="navigation prev" name="prev"></a>
</div>

скрипт, который выводит картинку во всплывающее окно

$('#our_team').children('.item').click(function(){
	$('#popup-container').addClass('active');
	$(this).addClass('active');
	show_images();
})

$('#popup-container').children('.navigation').click(function(){
	var action = $(this).attr('name');
	//alert(action);
	if(action == 'close'){
		$('#popup-container').removeClass('active');
		$('#our_team').children('.item').removeClass('active');
	} else if(action == 'next'){
		$('#our_team').children('.item.active').removeClass('active').next('.item').addClass('active');
		show_images();
	} else if(action == 'prev'){
		$('#our_team').children('.active').removeClass('active').prev('.item').addClass('active');
		show_images();
	}
	var image_width = $('#popup-image').find('img').outerWidth(),
	window_width = $(window).outerWidth(true);
	alert(image_width + ' ' + window_width);
})
function show_images(){
	var image = $('#our_team').children('.item.active').find('img').clone(),
	src = $('#our_team').children('.item.active').attr('href');
	
	
	$('#popup-image').children('img').animate({'opacity':'0'}, 200, function(){
		$('#popup-image').html('<img src="' + src + '"><div></div>');
		$('#popup-image').children('img').css({'opacity':'0'}).animate({'opacity':'1'}, 200);
	});
	
}

проблема в строчке $('#our_team').children('.item.active').removeClass('active').next('.item').addClass('active');
класс active нормально присваивается всем элементам до того момента, как выводится заголовок категорий . далее идущим элементам с классом .item класс active не присваивается. В чем может быть проблема?

Answer 1

[iBird Rose]

$('#our_team').children('.item.active').removeClass('active').nextAll('.item:first').addClass('active');

Comments

[nanny_ogg]

спасибо