如果列表为空，则隐藏父div

Question

我有以下...

<div class="validationbox">
    <h1>Errors</h1>
        <ul class="validationerrors">
            <li>Error 1</li>
            <li>Error 2</li>
            <li>Error 3</li>
        </ul>
</div>

错误列表项是动态生成的，因此有时没有，我想在没有列表项的情况下隐藏'validationbox'div。

我想我应该看的是javascript还是jquery，有人有示例吗？

Answer 1

在jQuery中，您可以做到以下简单操作：

$(".validationbox:not(:has(li))").hide();

在纯JavaScript中，您需要迭代“ .validationbox”元素并在其中搜索<li>节点：

var div = document.getElementsByClassName("validationbox");
for (var i = 0, len = div.length; i < len; i++) {
    if (!div[i].getElementsByTagName("li").length) {
        div[i].style.display = "none";
    }
}

Answer 2

$('.validationbox').toggle( $('.validationerrors li').length );

toggle()接受布尔值作为参数。 如果没有<li>元素，则$('.validationerrors li').length评估结果为false，否则为true，这将显示错误列表。

Answer 3

您可以不使用。

$('div .validationbox').not(':has(li)').hide();

希望对你有帮助