通过Jquery将无序列表转为下拉：当前页码不显示

Question

我正在尝试通过 Wordpress 中的 Jquery 将无序列表转换为下拉列表。

我已经设法将 ul lis 转到 select 列表，但是有一个问题：当前页码没有显示在下拉列表中列表.

我知道问题的根源在于所选列表不是 link，并且由于给定的插件结构，我无法将当前页码转换为 link。

我该如何解决这个问题？谢谢。

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

当前页面存储在span中。但是，第二个查询仅在列表项中查找嵌套的锚标记。使用 ', > li span' 扩展您的查询以在列表项内查找跨度标记。

检查 class 时，您也可以使用 hasClass() 方法。

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>

通过Jquery将无序列表转为下拉：当前页码不显示

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

html

javascript

jquery

dropdown