通過 Jquery 將無序列表轉換為下拉列表：當前頁碼不顯示

Question

我正在嘗試通過 Wordpress 中的 Jquery 將無序列表轉換為下拉列表。

我已經設法將ul li s 轉換為select列表，但是有一個問題：當前頁碼未顯示在下拉列表中。

我知道問題的根源是所選列表不是鏈接，並且由於給定的插件結構，我無法將當前頁碼轉換為鏈接。

我該如何解決這個問題？ 謝謝。

 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'擴展您的查詢，以在列表項中查找 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>