コードの評価願いコードの評価願い

Question

こんばんは、お世話になります。

もっとこういう書き方がある、こう書いた方が速くなる、など評価や修正を頂けると嬉しいです。よろしくお願いいたします。

Answer 1

jQuery3以降は$(document).ready(function() ...は非推奨で、$(function() ...で良いそうです。
参考

ただ、どちらの書き方であれ、ready(DOMContentLoadedイベント)のタイミングまで待つと、元のulが一瞬見えてしまう事もあるので、スクリプトで動的に書き換えるというやり方自体が、良い解決策ではない気がします。可能ならテンプレ触るのが一番だと思います。

WordPressのscriptタグがどこに挿入されるのか知らないですが、可能ならul要素が出てきた後のbodyタグ内にできるだけ早く、readyイベント抜きのベタ書きにして、チラつきの可能性を下げるのが良いと思います。

試しに書き替えてみたソースも一応貼っときますが、あまり変わらないので参考程度で。

const $ul = $('.sidebar ul')
const $select = $('<select onChange="location.href=value;"><option>-</option></select>')

$(`a`, $ul).each(function() {
    const $a = $(this)
    $select.append(`<option value="${$a.prop('href')}">${$a.text()}</option>`)
})

$ul.replaceWith($select)

Answer 2

jQueryを不要とし１行で済むこと。

<div class="sidebar">
<ol>
  <li><a href="http://x.jp?abc">abc</a>
  <li><a href="http://x.jp?def">def</a>
  <li><a href="http://x.jp?ghi">ghi</a>
</ol>
</div>

<select onchange="location.href=this.value">
<option value="">-</option>
</select>

<script>

[...document.querySelectorAll ('.sidebar li a')].reduce (
 (a,b)=> (a.appendChild (new Option (b.textContent, b.href)), a)
,document.querySelector ('select'));

</script>