javascript - 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 lis 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>