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

该脚本可以正常工作，但是在divContent div中添加了额外的div时，代码无法正常工作。

删除的代码将在最终模板中使用。 我该如何编辑JavaScript，使其可以处理两种情况。

Answer 1

您只对.calContent的子项 （而不是孙子项等） .calContent 。

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

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

更新小提琴