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

Answer 3

你可以不使用。

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

希望对你有所帮助

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

3 个答案: