Question

此网站上的首次提问。抱歉，格式化测试失败。

我几乎完全不了解javascript，但有人告诉我需要它来解决此问题。我有一个页面，其中有多个具有相同类的div。每个人下面都有一个多层次的层次结构。我想停止显示任何其子级包含特定类的div的父级。例如在下面的代码中，如果它们的直接或间接子级之一包含“ classb草稿”类，则要停止显示“ classa”类的所有div。因此，在这里，不会显示divb。

    <div id="diva" class="classa">
        <div id="divaa">
        </div>
        <div id="divab">
            <div id="divaba">
                <div id="divabaa"
                    <div id="divabaaa" class="classb">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="divb" class="classa">
        <div id="divba">
        </div>
        <div id="divbb">
            <div id="divbba">
                <div id="divbbaa"
                    <div id="divbbaaa" class="classb draft">
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

您没有关闭div，

<div id="divabaa"

您可以使用querySelectorAll()选择该班级的所有孩子（draft）。然后使用forEach()遍历所有匹配元素以找到.classa的{{3}} div，并将display属性设置为none。

var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
  el.closest('.classa').style.display = 'none';
});

<div id="diva" class="classa">
    <div id="divaa">
    </div>
    <div id="divab">
        <div id="divaba">
            <div id="divabaa">
                <div id="divabaaa" class="classb">
                  Without Draft
                </div>
            </div>
        </div>
    </div>
</div>
<div id="divs" class="classa">
    <div id="divba">
    </div>
    <div id="divbb">
        <div id="divbba">
            <div id="divbbaa">
                <div id="divbbaaa" class="classb draft">
                 Draft
                </div>
            </div>
        </div>
    </div>
</div>

javascript移除上层div，其中特定类在下面的层次结构中显示

1 个答案: