0

I have an HTML container like below

<div id="pgggo-pagination-bottom" class="pgggo-pagination pgggo-pagination-bottom">
    <span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="https://website.com/elementor-669/?paged=2">2</a>
<a class="page-numbers" href="https://website.com/elementor-669/?paged=3">3</a>
<a class="next page-numbers" href="https://website.com/elementor-669/?paged=2"><i class="fa fa-arrow-right"></i></a></div>

I am trying to add class current to the clicked pagination. also, I am removing the active one. This is my jQuery

      jQuery(document).ready(function($) {
  $('.pgggo-pagination').on('click', 'a.page-numbers', function(event) {
    event.preventDefault();
    $.ajax({
      url: pgggoAjax.ajax_url,
      type: 'POST',
      data: {
        action: 'pgggo_ajax_pagination_loader',
        nonce: pgggoAjax.nonce,
        pgggosettings: pgggoAjax.pgggosettings,
        pgggopage : parseInt($(this).text()),
      },
      success: function(response) {
         var pgggoPaginationElements = $('.pgggo-pagination span');
         var pgggoPaginationElementsA = $('.pgggo-pagination a');
         pgggoPaginationElements.removeClass('current');
         pgggoPaginationElementsA.removeClass('current');
         $(this).addClass('current');
         $('.pgggo-row').empty();
         $('.pgggo-row').append(response);
      },
    });
  });

});

Though remove works $(this).addClass('current'); does not work. Not sure what is wrong

GeekyOwl
  • 69
  • 6

0 Answers0