Converting an unordered list to drop-down through Jquery: current page number does not display

Question

I am trying to convert an unordered list to a drop-down list through Jquery in Wordpress.

I've managed to turn ul li s to to a select list, however there is a problem: Current page number does not show up in the drop-down list.

I understand that the root of the problem is that the selected list is not a link and due to the given plugin structure I am not able to convert current page number to a link.

How can I solve this issue? Thanks.

 jQuery(document).ready(function($) { $('ul.pagination').each(function() { var list = $(this), select = $(document.createElement('select')).insertBefore($(this).hide()).change(function() { window.open($(this).val(), '_self') }); $('>li a', this).each(function() { var option = $(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()); if ($(this).attr('class') === 'page-numbers current') { option.attr('selected', 'selected'); } }); list.remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="loopage_pg" class="pagination-wrap"> <ul class="pagination"> <li><a class="page-numbers" href="http://www.example.com/?pg=1">1</a></li> <li class="active "><span aria-current="page" class="page-numbers current">2</span></li> <li><a class="page-numbers" href="http://www.example.com/?pg=3">3</a></li> <li><a class="page-numbers" href="http://www.example.com/?pg=4">4</a></li> <li><a class="page-numbers" href="http://www.example.com/?pg=5">5</a></li> </ul> </div>

Answer 1

The current page is stored in a span . However the second query only looks for nested anchor tags in list items. Extend your query with ', > li span' to also look for a span tag inside the list item.

When checking for a class you could also use the hasClass() method.

 jQuery(document).ready(function($) { $('ul.pagination').each(function() { var list = $(this), select = $(document.createElement('select')).insertBefore($(this).hide()).change(function() { window.open($(this).val(), '_self') }); $('> li a, > li span', this).each(function() { var option = $(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()); if ($(this).hasClass('current')) { option.attr('selected', 'selected'); } }); list.remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="loopage_pg" class="pagination-wrap"> <ul class="pagination"> <li><a class="page-numbers" href="http://www.example.com/?pg=1">1</a></li> <li class="active "><span aria-current="page" class="page-numbers current">2</span></li> <li><a class="page-numbers" href="http://www.example.com/?pg=3">3</a></li> <li><a class="page-numbers" href="http://www.example.com/?pg=4">4</a></li> <li><a class="page-numbers" href="http://www.example.com/?pg=5">5</a></li> </ul> </div>