0

示例： 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类。

因此，如果像 eNews 这样的innerBoxContent类 div 子级为空，我只想在 Box 类 div 中添加类。

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

我们可以修改这段代码吗？

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

4

7 回答 7

2

你应该能够像这样浏览你的元素：

$('.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 可以有几个孩子，有些可能是空的，有些可能不是。

它未经测试，如果有更聪明的方法，我不会感到惊讶:)

于 2012-12-14T14:24:06.427 回答
1

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

CSS 有一个可以使用的:empty 伪类。

这个伪类匹配没有子元素的元素。元素节点和非空文本节点被认为是子节点；空文本节点、注释和处理指令不算作子节点。如果文本节点的数据长度为零，则认为它是空的；因此，例如，具有单个空格的文本节点不是空的。

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

.innerBoxContent:empty {
display: none;
}

你有

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

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

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

选择器不起作用。

于 2012-12-14T14:43:39.040 回答
0

你不能只计算 innerBoxContent 孩子吗？

if ($('.innerBoxContent > div').length) {
    $('.innerBox').parent().removeClass('DispNone');
} else {
    $('.innerBox').parent().addClass('DispNone');
}
于 2012-12-14T14:13:37.850 回答
0 
$(".eNews").each(function(index, element){
    if($(element).html() == ""){
        $(element).parent().hide();
    }
)};
于 2012-12-14T14:16:34.223 回答
0

我会说类似

$('.innerBoxContent > div').each(function() {
                                      if( this.html() == "" ) {
                                         this.parent().hide();
                                      }
                            });
于 2012-12-14T14:18:15.573 回答
0

您应该使用toggle()函数。

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

    });
于 2012-12-14T14:18:23.373 回答
0

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

如果内容只是从服务器加载，那么你应该只在它上面应用一个类，而不是依赖 JavaScript 来为你做你的初始演示样式。

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

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

于 2012-12-14T14:27:29.500 回答