如果存在 2 个子 div，则隐藏父 div？答案

【问题标题】：hide parent div if 2 child divs are present?如果存在 2 个子 div，则隐藏父 div？
【发布时间】：2014-05-02 06:51:44
【问题描述】：

我有一个父 div 和 2 个嵌套的子 div。当第二个子 div 不包含任何内容时，我想隐藏第一个子 div 和父 div。我想知道如何做到这一点？

我有2个子div的原因是因为我正在创建一个响应式网站，所以一个是完全扩展内容，第二个是将内容放在页面中间，第三个是容纳内容包含在里面。

      <div id="portfolio"><!--portfolio-->
        <div id="portfolio-works"><!--portfolio-works-->
            <div class="portfolio-works-container"><!--portfolio-works-container-->


          </div><!--/portfolio-works-container-->
        </div><!--/portfolio-works-->
   </div><!--/portfoio-->

【问题讨论】：

“不包含任何内容”是什么意思？
请分享您到目前为止尝试过的代码？
.portfolio-img 是你的第二个 div 吗？
在这里尝试解决方案：stackoverflow.com/questions/1992114/…
PollyGeek - 当它为空时。在上面的代码中存在内容，但如果不存在，那么我希望第一个子 div 和父 div 消失。

标签： javascript jquery html css

【解决方案1】：

试试这个：

$('.portfolio-works-container').each(function() {
    if($(this).find('.portfolio-img').children().length > 0) {
        $(this).hide();
    }
});

【讨论】：

【解决方案2】：

您可以使用empty 选择器检查元素是否完全为空，但为空意味着根本没有空格。如果有可能会有空白，那么您可以使用$.trim() 并检查内容的长度；然后获取它的兄弟并隐藏它。

演示代码：

$('.portfolio-img:empty').siblings('.portfolio-text').hide();

if (!$.trim( $('.portfolio-img').html() ).length){
    $('.portfolio-img').siblings('.portfolio-text').hide();
}

演示：http://jsfiddle.net/Sf8aH/

如果你可以在元素上设置display:none而不是检查它的内容会更容易。

【讨论】：

【解决方案3】：

如果这将是您的 HTML 结构，那么实现起来有点容易：

jQuery(document).ready(function(){
    var divGroup = jQuery('.portfolio-works-container > div:nth-child(2)');
    if( divGroup.html() == '' ) {
        divGroup.parent().toggle();
    }
});

jsFiddle 示例：http://jsfiddle.net/laelitenetwork/88DMt/2/

干杯。

【讨论】：