Как скрыть родительский DIV, который вложен DIV внутри

Question

HTML:

<div class="btn-small blue"> 
    <span class="label bottom">Vascular Surgery</span> 
</div> 

<div class="btn-small red"> 
    <span class="label bottom">Administrator</span> 
</div> 

<div class="btn-small blue"> 
    <span class="label bottom">Cardiology North</span> 
</div> 

<div class="calContent"> 
    <div class="divContent"> 
     <div class="divContentHolder"> 
      <div> 
       VASCULAR CURGERY 
      </div> 
      <div> 
       CALENDAR GOES HERE 
      </div> 
     </div> 
    </div> 
    <div class="divContent"> 
     This is Second 
    </div> 
    <div class="divContent"> 
     This is Third 
    </div> 
</div> 

Fiddle: https://jsfiddle.net/geetof8x/

Если удалить следующий код:

С:

<div class="divContent"> 
    This is First 
</div> 

Скрипт ks отлично, но с добавленным дополнительным div внутри div divContent код работает неправильно.

Удаленный код будет использоваться в окончательном шаблоне. Как я могу отредактировать javascript, чтобы он мог обрабатывать сценарий любого случая.

Answer 1

Вас интересует только детей (не внуки и т. Д.) От .calContent.

Одним из решений является использование child selector, чтобы ограничить выбор только прямых детей:

$('.calContent > div:eq(' + $(this).index() + ')').fadeOut(); 

Updated Fiddle