如果 ul 为空，则隐藏 div

Question

Here is my html ,

<div id="personaldetails">

    <ul>
        <li class="clear"></li> 
    </ul>
    <ul>
        <li class="clear"></li> 
    </ul>
</div>

I want to hide div personaldetails when all the ul inside in div is empty.

If the ul is having element <li class="clear"></li> then the ul is considered as to be empty.

How to do this using Jquery ?

Answer 1

You can try this:

$('#personaldetails').find('ul').each(function(){
   var txt = $("li", this).text();
   if(txt.length <= 0){
      $(this).hide();
   }
});
if(!$('#personaldetails').find('ul:visible').length){
    $('#personaldetails').hide();
}

Updated Fiddle

---

And to me you should hide all ul , if no ul are visible then you can hide the #personaldetails div.

Answer 2

Even one of answer is already accepted, I think it can be simple as:

if($.trim($("#personaldetails").text()) == '') {
    $("#personaldetails").hide();
}

:)

Answer 3

Take a look at that code:

function foo(){
    var all_li_clear = true;
    $("#personaldetails > ul > li").each(function(){
        if(!$(this).hasClass("clear")){
            all_li_clear = false;
            break; // No need to continue now
        }
    });

    if(all_li_clear){
        $("#personaldetails").hide();
    }
}

You can see a fiddle example there , just comment and discomment foo(); line.

Answer 4

Javascript solution:

This will only hide the div if all li have clear class

        $(function() {
         emptyLi = $('#personaldetails ul li').filter(function(){

            /*if($(this).hasClass('clear')){
             return true;
            }else{
             return false;
            }*/
            return $(this).hasClass('clear');

         }).length;

         if($('#personaldetails ul li').length == emptyLi){

           $('#personaldetails').css('display','none');
         }
        });

CSS:

This will hide the li with class clear, so if you not fixed height of ul or li and don't have padding , margin given to ul,li your div personaldetails will get hidden automatically when all li element have class clear

        #personaldetails ul li.clear{
          display:none;
        }

Answer 5

- UPDATED -

You can use following code if you are deciding empty class based on clear class.

if($("#personaldetails ul li:not(.clear)").length == 0) {
    $("#personaldetails").hide();
}

Or if you are looking for the empty div then you can just use the shortest code given by @Samiul Amin Shanto Like :

if($.trim($("#personaldetails").text()) == '') {
    $("#personaldetails").hide();
}

Explanations

Method1 :

$("#personaldetails ul li:not(.clear)") This code find all li without the clear class. Then if no such li found, just hide the div . Fiddle

Method2 :

$("#personaldetails").text() this code return innerHTML text striping all html tags. So no meter what the div contain ul, li or anything else, this will return the plain text content of the div, then striping any white space we can determine if the div is empty. If your intention is to hide the empty div not hiding the div which contain empty Ul this should be your choice.

Answer 6

$(function($) {
    $cnt = 0;
    $('.personalDetails ul li').each(function() {
        if($(this).hasClass('clear')) $cnt++;
    });
    if($('.personalDetails ul li').length == $cnt) $('.personalDetails').hide();
});

Answer 7

This asumes that if you have the same amount of li's with the class clear, as there are ul's, they're all empty

var $wrapper = $('#personaldetails');
if(  $wrapper.find('ul').length=== $wrapper.find('li.clear').length){ 
    $wrapper .hide(); 
}

Everybody's fiddling examples :)

Answer 8

$("ul li:empty").closest('div#personaldetails').hide();

示例代码

Answer 9

#personaldetails ul li.clear{
    visibility:hidden;
}