如何隐藏嵌套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>

小提琴:https://jsfiddle.net/geetof8x/

如果我删除以下代码:

<div class="divContent">
    <div class="divContentHolder">
        <div>
            VASCULAR CURGERY
        </div>
        <div>
            CALENDAR GOES HERE
        </div>
    </div>
</div>

附:

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

该脚本工作正常,但在div中添加了额外的divContentdiv,代码无法正常工作.

删除的代码将用于最终模板.如何编辑javascript以便它可以处理任何一种情况.

Answer 1

你只对孩子(不是孙子等)感兴趣.calContent.

一种解决方案是使用子选择器将您的选择限制为仅直接子项:

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

更新小提琴