アンカーリンクを自動的に増やす

タイトルの数に応じてアンカーリンクを自動で作成します。
wpのビジュアルエディタ部分で実装しました。ビジュアルエディタで見出し(h2)を追加するとその数に応じてアンカーリンクが増えます。静的なサイトでも十分活躍できそう。

See the Pen rJWrWV by nekuta (@nekuta) on CodePen.

HTML

js(jQuery)

解説

まず空の配列を2つ作ります。
ttl_nameに見出しの名前を、ttl_linkにアンカーリンクを入れる想定です。

存在する.ttl_linkをeachで回してattrでidを振っていきます。
そして先ほど作った空の配列に値を入れていきます。.pushは値を配列に追加するメソッド。
最後に配列の値を入れ込んで.topics_single_listへappendします。appendは要素を追加するメソッド。

参考サイト

jQueryのeach()で複数の要素、配列、オブジェクトをループ処理
jQueryを利用したDOM操作 要素の追加メソッドまとめ

  • コーダーのための計算機