Question

示例： http://partnerswealth.advisorproducts.com/home
http://mah.advisorproducts.com/home

要求：

我想在空白时隐藏左右div或Box。

以下是我正在使用的HTML代码：

<div class="Box secondaryBackground">
<div class="innerBox containerBackground">
<h2> </h2>
<div class="innerBoxContent">
<div class="eNews"> </div>
</div>
</div>
</div>

以下是我使用的js - 并尝试仅在其 innerBoxContent 子div为空的Box类div中添加 DispNone 类

所以我只想在Box类div中添加类，如果 innerBoxContent 类，那么像eNews这样的子类是空的。

$(document).ready(function () {
    str = $('.innerBoxContent > div').text();
    if ($.trim(str) === "") {
        $('.innerBox').parent().addClass('DispNone');
    }
    else {
        $('.innerBox').parent().removeClass('DispNone');
    }
});

我们可以修改此代码吗？

现在它向所有innerBox div添加类但我只想要那些最后一个子元素为空的div，如.eNews并非所有。谢谢苏希尔

Answer 1

你应该能够通过这样的元素：

$('.innerBoxContent').each(function() {
    var noContent = 0;
    var count = $(this).children().length;
    $(this).children().each(function() {
        if ($(this).html == '') {
            ++noContent;
        }
    });
    if (noContent === count) {
        $(this).hide();
    }
});

上面考虑到每个innerBoxContent可以有几个子节点，有些可能是空的，有些可能不是。

这是未经测试的，如果有更聪明的方法，我不会感到惊讶：）

Answer 2

为什么要使用JS？如果浏览器是IE8或使用功能检测（如推荐modernizer），则使用它来回退，并发现：empty选择器未定义或可用。

CSS有一个:empty pseudo-class可以使用。

此伪类匹配没有子元素的元素。元件节点和非空文本节点被认为是子节点;空文本节点，注释和处理指令不计为儿童。如果文本节点的数据长度为，则认为该节点为空零;因此，例如，具有单个空格的文本节点不为空。

所以，如果你有类似的东西：

.innerBoxContent:empty {
display: none;
}

你有

<div class="innerBoxContent"></div>

它会起作用。但是，如果你有：

<div class="innerBoxContent">
  <div class="eNews">
  </div>
</div>

选择器不起作用。

Answer 3

你不能只计算innerBoxContent孩子吗？

if ($('.innerBoxContent > div').length) {
    $('.innerBox').parent().removeClass('DispNone');
} else {
    $('.innerBox').parent().addClass('DispNone');
}

Answer 4

$(".eNews").each(function(index, element){
    if($(element).html() == ""){
        $(element).parent().hide();
    }
)};

Answer 5

我会说像

$('.innerBoxContent > div').each(function() {
                                      if( this.html() == "" ) {
                                         this.parent().hide();
                                      }
                            });

Answer 6

您应该使用toggle()功能。

   $(document).ready(function () {
        str = $('.innerBoxContent > div').text();
        if ($.trim(str) === "") {
            $('.innerBox').parent().toggle();
        }

    });

Answer 7

如果innerBoxContent中的内容存在，然后某个操作会删除该部分中的内容，那么您应该在该事件上显示/隐藏，而不是尝试触发在所有事件上运行的事件。

如果内容仅从服务器加载，那么您应该只在该点上应用一个类，而不是依赖JavaScript来为您执行初始演示样式。

许多结果有助于JavaScript，但是如何添加和删除内容是脚本需要放置的位置。

除了将显示/隐藏链接到任何更改内容的事件之外，您可以设置事件发射器，然后通过事件系统连接代码。

如果空白，我们如何隐藏div？

7 个答案: