jQuery - 检查div是否有内容，如果没有将类添加到顶级div

Question

I'm really hoping someone can help me. I am having issues with this page: http://dd-server.co.uk/vinetrail/producers/

Each region has a number of producers which are shown via collapsible divs. It's all working fine, but when you use the filter at the top of the page, it still works fine except the empty regions are still shown.

I want to use jQuery to detect the empty divs and hide the whole region, so only regions with producers are shown. Here is my code:

<div id="producer-list">            
            <?php
                $region_group_terms = get_terms( 'producer_region' );
                $c = 0;
                $id = 'section1';

                foreach ( $region_group_terms as $region_group_term ) {
                    $c++;
                    $producers_query = new WP_Query( array(
                        'post_type' => 'producers',                         
                        'orderby'   => 'title',
                        'order'     => 'ASC',
                        'tax_query' => array(
                            array(
                                'taxonomy' => 'producer_region',
                                'field' => 'slug',
                                'terms' => array( $region_group_term->slug ),
                                'operator' => 'IN'
                            )
                        ),
                        'search_filter_id'  => 788
                    ) );
                ?>

                <div class="pro-wrap">                  
                    <?php if($c == 1) : ?>
                        <div class="collapsible collapse-open" id="<?php echo $id; ?>"><h2><?php echo $region_group_term->name; ?><span></span></h2></div>
                    <?php else : ?>
                        <div class="collapsible" id="<?php echo $region_group_term->name; ?>"><h2><?php echo $region_group_term->name; ?><span></span></h2></div>
                    <?php endif; ?>

                        <div class="container">
                            <div class="content">
                                <?php
                                    if ( $producers_query->have_posts() ) : while ( $producers_query->have_posts() ) : $producers_query->the_post(); ?>
                                        <div class="one-quarter">                                           
                                            <?php if ( has_post_thumbnail() ) : ?>
                                                <a href="<?php echo get_permalink(); ?>"><?php echo get_the_post_thumbnail(); ?></a>
                                            <?php else : ?>
                                                <a href="<?php echo get_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/producer-default.jpg" alt="<?php echo the_title(); ?>" /></a>
                                            <?php endif; ?>

                                            <h3>
                                                <a href="<?php echo the_permalink(); ?>">
                                                    <?php echo $region_group_term->name; ?>
                                                    <span><?php echo the_title(); ?></span>
                                                </a>
                                            </h3>                                           
                                        </div>
                                    <?php endwhile; endif; ?>

                                <?php
                                    $member_group_query = null;
                                    wp_reset_postdata();
                                ?>
                            </div>
                        </div>
                    </div>
                    <?php } ?>
        </div>          

Answer 1

You can try this, in jQuery

Try 1

jQuery( document ).ready(function() {
  // Loop over hidden element with class container 
  jQuery.each(jQuery('.pro-wrap .container:hidden'), function(i, ele){
    // Hide closest parent found with class pro-wrap
    jQuery(ele).closest('.pro-wrap').hide();
  });
});

Try 2

jQuery( document ).ready(function() {
  // Loop over element with class content 
  jQuery.each(jQuery('.pro-wrap .container .content'), function(i, ele){
    var jEle = jQuery(ele);
    // If empty content
    if (jEle.text().trim().length == 0) {
      // Hide closest parent found with class pro-wrap
      jEle.closest('.pro-wrap').hide();
    }
  });
});