Удаление вложенных классов в элементах табов?

Question

[Джон Голт]

Есть набор табов, в которых помимо появления самих табов, появляются внутренние элементы этих табов.

<div class="tabs-nav">
		<ul>
			<li class="inject" data-type="tab-1">All projects</li>
			<li class="inject" data-type="tab-2">Buildings</li>
			<li class="inject" data-type="tab-3">Interior design</li>
			<li class="inject" data-type="tab-4">Isolation</li>
			<li class="inject" data-type="tab-5">Plumbing</li>
			<li class="inject" data-type="tab-6">Tiling</li>
		</ul>
	</div>
	<div class="tabs-content">
		<ul>
			<li class="tab-el tab-1 el-1">
				<div class="project tab-1 project-1"></div>
				<div class="project tab-1 project-2"></div>
				<div class="project tab-1 project-3"></div>
				<div class="project tab-1 project-4"></div>
				<div class="project tab-1 project-5"></div>
				<div class="project tab-1 project-6"></div>
				<div class="project tab-1 project-7"></div>
				<div class="project tab-1 project-8"></div>
			</li>
			<li class="tab-el tab-2 el-2">
				<div class="project project-1 tab-2"></div>
				<div class="project project-2 tab-2"></div>
				<div class="project project-3 tab-2"></div>
				<div class="project project-4 tab-2"></div>
				<div class="project project-5 tab-2"></div>
				<div class="project project-6 tab-2"></div>
				<div class="project project-7 tab-2"></div>
				<div class="project project-8 tab-2"></div>
			</li>
			<li class="tab-el tab-3 el-3">
				<div class="project project-1 tab-3"></div>
				<div class="project project-2 tab-3"></div>
				<div class="project project-3 tab-3"></div>
				<div class="project project-4 tab-3"></div>
				<div class="project project-5 tab-3"></div>
				<div class="project project-6 tab-3"></div>
				<div class="project project-7 tab-3"></div>
				<div class="project project-8 tab-3"></div>
			</li>

$('.inject').on('click', function(event){
			event.preventDefault();

			$(this).addClass('tab-color').siblings().removeClass('tab-color');
			var selected_member = $(this).data('type');
			$('.tab-el.'+selected_member+'').addClass('appear').siblings().removeClass('appear');
			$('.tab-el.'+selected_member+'').find('.project').addClass('appear');

Вопрос: как сделать так, чтобы по клику по другому табу, исчезали не только сами табы, кроме текущего, но и их вложенные элементы ".project", а точнее теряли класс ".appear" ?

Answer 1

[Stalker_RED]

Добавьте

$('.tab-el.'+selected_member+'').siblings().find('.appear').removeClass('appear')

Даже так:

$('.inject').on('click', function(event){
      event.preventDefault();

      $(this).addClass('tab-color').siblings().removeClass('tab-color');
      var selectedTab = $('.tab-el.'+$(this).data('type'));
      selectedTab.closest('ul').find('.appear').removeClass('appear');
      selectedTab.addClass('appear').find('.project').addClass('appear');

Answer 2

[link_irk]

Если я правильно понял, то при нажатии на любой таб должны скрываться (удаляться класс appear) все элементы .project и устанавливаться класс apper только у связанного по data-type блока. Тогда можно сделать так: $('.project').removeClass('appear');
А уже потом $('.tab-el.'+selected_member+'').find('.project').addClass('appear');
То есть логика такая: убрали у всех, установили у нужных