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