javascript - 如何隐藏内部嵌套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">
    <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 的子(不是孙子等)感兴趣。

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

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

Updated Fiddle