Question

我有一个父div和两个嵌套的子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-->

Answer 1

试试这个：

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

Answer 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而不是检查其内容，那将会更容易。

Answer 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/

干杯。

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

3 个答案: