Question

我所拥有的有时在ym页面上div可能是空的并占用空白空间。所以我希望能够隐藏它，如果它是空的那么宽度很小..

这是html ...

<div class="four columns">
        <div class="inner-column" style="height:500px;overflow: auto;">            
             <ul class="SubMenu">
            </ul>
        </div>
    </div>

这是我正在尝试的jquery ......

if ($('.four columns').is(":empty")) {
            $('.four').css('width','15px');
        }

应该是什么？

例如：http：//jsfiddle.net/uzi002/yad9Q/6/

Answer 1

我通常使用的技术是测试div中文本的长度：

if ($('.four.columns').text().length === 0) {
    $('.four').css('width', '15px');
}

Answer 2

检查text()长度为零或空字符串的问题是它包含所有制表符和空格。因此，$.trim()应用于结果（demo）：

$(function() {

    if ($.trim( $('.four.columns').text() ).length === 0) {
        $('.four.columns').hide();
    }

});

另外，如果要检查所有列，请使用：

$(function() {

    /* check all columns */
    $('.columns').each(function(){
        if ($.trim( $(this).text() ).length === 0) {
            $(this).hide();
        }
    });

});

Answer 3

你可以做到

if ($('.four columns').text() === '') {
        $('.four colums').hide();
    }

或

if ($('.four columns').html() === '') {
        $('.four colums').hide();
    }

Answer 4

您可以将高度设为0或隐藏它：

if($(".innerColumn").text() == ""){
   $(".innerColumn").css("height",0); or $(".innerColumn").hide()
}

Answer 5

首先，您无法使用空格来构建类

<div class="four columns">

现在这是两个名为“四”和“列”的类，因此该类不称为四列。

我应该选择lenght函数来检查它是否为空。

if ( $('.columns .inner-column').html().length === 0 ){
  $(".columns .inner-column").hide()
}

隐藏功能隐藏整个元素。它在源代码中，但对客户端不可见。

我可以问你为什么要在客户端解决这个问题？我认为如果内容为空，检查服务器端更聪明，然后不生成图像。

如何检查div是否为空并消失？

5 个答案: