如果 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;
}