如果列表為空，則隱藏父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();

希望對你有幫助