如何只对可见的帖子进行分组?

时间:2021-10-06 作者:JonSnow

下午好

在这里的一位同事的帮助下,我终于能够在一个页面上显示所有帖子,并将相应的帖子月份作为组之间的分隔符。

看起来是这样的:

February 2021
----------------- 
post 5 
post 4


January 2021
------------------ 
Post 3 
Post 2 
Post 1


...and so on...
到目前为止还不错。但我还有一句话;“过滤器”;在该页面上,单击即可显示或隐藏帖子。e、 g.你可以按文章作者过滤,如果一篇文章与过滤器不匹配,则该文章将被隐藏,添加了一个“点”;样式=显示:无“;在其容器上。

大问题:只有当分隔符组有可见的帖子时,如何显示分隔符?

<?php
    $wpb_all_query = new WP_Query( [
        \'post_type\'=>\'post\',
        \'post_status\'=>\'publish\',
        \'posts_per_page\'=> -1,
        \'orderby\' => \'date\',
        \'order\' => \'DESC\'
    ] );

    $dividers = [];
?>

<?php if ( $wpb_all_query->have_posts() ) : ?>

    <div id="list_allposts">
        <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>

            <?php $post_date = get_the_date( \'F Y\' ); ?>
            <?php if ( !in_array( $post_date, $dividers ) ): ?>
                <?php $dividers[] = $post_date; ?>
                <div class="divider">
                    <?= $post_date; ?>
                </div>
            <?php endif ?>

            <!-- Post code here -->

        <?php endwhile; ?>
    </div>

<?php endif; wp_reset_postdata(); ?>
PS:目前,只要有有源滤波器,我就隐藏分频器。但也许有更好的解决方案,这样我们就可以有分频器,尽管有一个有源滤波器。将使页面更加完美。。

1 个回复
最合适的回答,由SO网友:Shazzad 整理而成

为分隔符指定一个属性,即:data-target=".group_20211006" 并将类添加到post容器,即:class="blah group_20211006". 过滤器更改后,循环遍历每个分隔符,检查是否有任何可见的具有匹配日期值的post容器。

HTML

<!-- First Group -->
<div class="divider" data-target=".group_20211001">October 1, 2021</div>
<div class="post-1 group_20211001">...</div>
<div class="post-2 group_20211001">...</div>
<div class="post-3 group_20211001">...</div>

<!-- Second Group -->
<div class="divider" data-group=".group_20211006">October 6, 2021</div>
<div class="post-1 group_20211006">...</div>
<div class="post-2 group_20211006">...</div>
<div class="post-3 group_20211006">...</div>

jQuery

(function($){
  $(document).ready(function(){
    $(document.body).on(\'change\', \'.myfilter\', function(){
      $(\'div.divider\').each(function(e, el){
        if ( $($(el).attr(\'data-group\')).is(\':visible\').length > 0 ) {
          $(el).show();
        } else {
          $(el).hide();
        }
      });
    });
  });
})(jQuery)
我还没有测试,但这应该是让它工作的概念。