如果 ul 为空，则隐藏 div

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

更新的小提琴

---

对我来说，你应该隐藏所有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();
    }
}

您可以在那里看到一个小提琴示例，只需注释和取消注释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：

这将隐藏类 clear 的 li，所以如果你没有固定 ul 或 li 的高度并且没有填充，给 ul,li 的边距，当所有 li 元素都有类 clear 时，你的 div 个人详细信息将自动隐藏

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

Answer 5

-更新-

如果您根据clear class 决定空 class，则可以使用以下代码。

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

或者，如果您正在寻找空的 div，那么您可以使用@Samiul Amin Shanto Like给出的最短代码：

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

说明

方法一：

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

方法二：

$("#personaldetails").text()此代码返回对所有 html 标签进行条带化处理的 innerHTML 文本。 因此，没有计量 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 和 class clear，因为有 ul，它们都是空的

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

每个人都在摆弄例子:)

Answer 8

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

示例代码

Answer 9

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