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

I have a parent div and 2 nested child divs. I want to hide the first child div and the parent div when the second child div doesn't contain any content.I was wondering how this could be done?

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

The reason I have 2 child divs is because I am creating a responsive website, so one is to fully extend the content, the second one is to centre the content in the middle of the page and the third is to house the content that is contained within.

我有两个子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-->

3 个解决方案

#1

Try this:

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

#2

You can check if the element is completely empty using empty selector, but empty means no white space at all. If there's a chance that there will be white space, then you can use $.trim() and check the length of the content; then get the its sibling and hide it.

您可以使用空选择器检查元素是否完全为空,但空表示根本没有空格。如果有可能存在空格,那么你可以使用$ .trim()并检查内容的长度;然后得到它的兄弟并隐藏它。

Demo code:

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

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

Demo: http://jsfiddle.net/Sf8aH/

It will be easier if you can set display:none on the element instead of check its content.

如果您可以在元素上设置display:none而不是检查其内容,将会更容易。

#3

if that will be your HTML structure then it's somewhat easy to achieve:

如果这将是您的HTML结构,那么它有点容易实现:

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

jsFiddle Example: http://jsfiddle.net/laelitenetwork/88DMt/2/

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

Cheers.

#1