Question

请允许我使用以下HTML：

<ul class="nested">
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

<ul class="nested">
</ul>

<ul class="nested">
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

我想检查哪个ul没有li，在页面加载后将其隐藏。

也可以使用jquery完成。

谢谢

Answer 1

您只需要CSS

：empty伪选择器将选择包含以下任一元素的元素什么也没有，只有HTML注释。

div:empty {
   display: none;
}

来源https://css-tricks.com/almanac/selectors/e/empty/

Answer 2

您可以使用以下jQuery做到这一点。

:if getfsize('/tmp/vim.err')>0|echo join(readfile('/tmp/vim.err'),"\|")|endif

或者，正如用户Rory McCrossan所建议的那样，编写起来要简单得多：

 window.onload = function(){ // When the page has finished loading.
    $(".nested").each(function(){ // Check every "nested" class 
    if($(this).children().length == 0){ // If this nested class has no children
        $(this).hide(); // This will hide it, but not alter the layout
        // $(this).css("display", "none"); // This will alter the layout
        } else{
        $(this).show();
        //$(this).css("display", "none"); // This will alter the layout
        }
     }
}

Answer 3

要通过jQuery做到这一点，您可以在jQuery中使用$.each ...也有很多可能的选项可以解决此问题

$(".nested").each(function(index){
    if(!$(this).find("li").length){
        $(this).hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nested">
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

<ul class="nested">
</ul>

<ul class="nested">
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

里面没有li时，ul该如何隐藏？

3 个答案: