Question

这是我的html，

<div id="personaldetails">

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

当div中的所有ul内部为空时，我想隐藏div personaldetails。

如果ul包含元素<li class="clear"></li>，则ul被视为空。

如何使用Jquery做到这一点？

Answer 1

你可以试试这个：

$('#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

对我来说，你应该隐藏所有ul，如果没有可见的ul，那么你可以隐藏#personaldetails div。

Answer 2

即使其中一个答案已被接受，我认为它可以很简单：

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

：）

Answer 3

看看那段代码：

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();
    }
}

你可以看到一个小提琴示例there，只是评论和消除foo();行。

Answer 4

Javascript解决方案：

如果所有li都有明确的类

，这只会隐藏div

        $(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：

这将隐藏li类与类清除，所以如果你没有固定ul或li的高度并且没有填充，则给予ul，li的余量当你的所有li元素都有类时，你的div personaldetails会自动隐藏明确

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

Answer 5

- <强>已更新 -

如果您根据清除类决定空类，则可以使用以下代码。

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

或者，如果您正在寻找 空div ，那么您可以使用 @Samiul Amin Shanto {{3}提供的最短代码}}：

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

的说明

方法1 ：

$("#personaldetails ul li:not(.clear)") 此代码查找没有清除类的所有 li 。然后，如果找不到这样的 li ，只需隐藏 div 。 Like

方法2 ：

$("#personaldetails").text()此代码返回innerHTML文本条带化所有html标记。所以不包含div包含ul，li或其他任何内容的米，这将返回div的纯文本内容，然后条带化我们可以确定div是否为空的任何空格。如果您打算隐藏空div而不隐藏包含空 Ul 的div，那么这应该是您的选择。

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

这假设如果你有相同数量的li与班级明确，因为有ul，他们都是空的

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

每个人fiddling examples :)

Answer 8

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

Sample Code

Answer 9

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

如果ul为空则隐藏div

9 个答案:

Updated Fiddle

的说明