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的孩子（非孙子等）感兴趣。

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

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

<强> Updated Fiddle

如何隐藏嵌套div的父div

1 个答案: