Javascript jQuery使用具有两种不同格式的循环加载更多wordpress帖子

我用两种不同格式的循环加载分页帖子。我使用一个计数器来确定帖子是否是第一篇帖子。如果是，则按这种方式格式化；如果是，则按另一种方式格式化（不是第一篇文章）

我正在使用js加载页面文章，当用户滚动到底部时，一切正常，但是，它加载页面文章时，第一篇文章的格式为A。我需要它来加载所有页面文章，但将它们设置为格式B。我该怎么做

我的php wordpress循环加载帖子：

格式A
格式B

我的JS：

jQuery（函数（）{
var-page=2；
var myurl='1〕http://MyURL.com/'
var loadmore='on'；
jQuery（document）.on（'scroll resize'，function（））{
if（jQuery（window）.scrollTop（）+jQuery（window）.height（）+200>jQuery（document）.height（））{
如果（loadmore=='on'）{
loadmore='off'；
jQuery（'#spinner'）.css（'visibility'，'visible'）；
jQuery（'#lazyload'）.append（jQuery（''）.load（myurl+'/blog/page/'+page+'article'，function（）{
page++；
loadmore='on'；
jQuery（'#spinner'）.css（'visibility'，'hidden'）；
}));
}
}
});
jQuery（文档）.ajaxComplete（函数（事件、xhr、选项）{
如果（$（“.blog grid”）.is（':empty'））
{
loadmore='off'；
}
if（xhr.responseText.indexOf（'class=“blog grid”）=-1）{
}
});
});

<?php
  // set up or arguments for our custom query
  $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
  $query_args = array(
    'post_type' => 'post',
    'posts_per_page' => 3,
    'paged' => $paged
  );
  // create a new instance of WP_Query
  $the_query = new WP_Query( $query_args );
?>

<?php if ( $the_query->have_posts() ) : $counter = 1; while ( $the_query->have_posts() ) : $the_query->the_post(); if( $counter == 1 ) { ?>
    <article id ="featured">
        Format A
    </article>
<?php } else {?>
    <article id="non-featured">
        Format B
    </article>

<?php }
$counter++;
endwhile;
endif;
?>      

jQuery(function(){
var page = 2;
var myurl = 'http://MyURL.com/'
var loadmore = 'on';
jQuery(document).on('scroll resize', function() {
  if (jQuery(window).scrollTop() + jQuery(window).height() + 200 > jQuery(document).height()) {
    if (loadmore == 'on') {
      loadmore = 'off';
      jQuery('#spinner').css('visibility', 'visible');
      jQuery('#lazyload').append(jQuery('<div class="blog-grid" id="p' + page + '">').load(myurl + '/blog/page/' + page + ' article', function() {
        page++;
        loadmore = 'on';
        jQuery('#spinner').css('visibility', 'hidden');
      }));
    }
  }
});
jQuery( document ).ajaxComplete(function( event, xhr, options ) {
    if ( $(".blog-grid").is(':empty'))
    {
       loadmore = 'off';
    }
  if (xhr.responseText.indexOf('class="blog-grid"') == -1) {
  }
});
});