Question

我真的希望有人可以帮助我。我在使用此页面时遇到问题：http://dd-server.co.uk/vinetrail/producers/

每个地区都有许多生产者，通过可折叠的div显示。它一切正常，但是当你在页面顶部使用过滤器时，它仍然可以正常工作，除了仍然显示空白区域。

我想使用jQuery来检测空div并隐藏整个区域，因此只显示带有生成器的区域。这是我的代码：

<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

你可以在jQuery中试试这个

尝试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();
  });
});

尝试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();
    }
  });
});

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

1 个答案: