Shopify jQueryのページナビゲーション - idでナビのタイトルを取得

Question

私は長いブログ記事を持っているShopifyサイトを持っていますが、私はH2に基づいてブログページテンプレートの左側に記事のナビゲーションを作成する方法を探していますタグ。

私はいくつかの単純なjQueryとidを使って、ページのさまざまな部分へのリンクを作成しました。ここに私がこれまで持っているものがあります。

HTML（テンプレート）

<div class="col-md-3"> 
    <ul class="article-nav"> 
     <li><a href="{{ article.url }}/#g1" alt="" id="title1">Group 1</a></li> 
     <li><a href="{{ article.url }}/#g2" alt="" id="title2">Group 2</a></li> 
     <li><a href="{{ article.url }}/#g3" alt="" id="title3">Group 3</a></li> 
     <li><a href="{{ article.url }}/#g4" alt="" id="title4">Group 4</a></li> 
    </ul> 
    </div> 
    <div class="col-md-9"> 
    {{ article.content }} 
    </div> 

が今ここにブログの記事からコード自体

<h2 id="g1">This is my first title</h2> 
<p>Some content ...</p> 
<h2 id="g2">This is my second title</h2> 
<p>Some content ...</p> 
... 

は、ここで私は一緒に

var tr1 = $(g1).text(); 
var tr2 = $(g2).text(); 
var tr3 = $(g3).text(); 
var tr4 = $(g4).text(); 
$(title1).html(tr1); 
$(title2).html(tr2); 
$(title3).html(tr3); 
$(title4).html(tr4); 

をそれをすべて入れて持ってjQueryのだ私はjavascriptやjQueryの専門家ではありません。このコードを単純化する方法はありますか？私は今はあまりにも多くのことを書いているように見えますが、それは緊張している可能性があります。 jQueryを使って

Answer 1

：

$(document).ready(function(){ 
    var rows = 4;//quantity of articles 
    for(i = 1; i <= 4; i++){ 
     var txt = $('#g'+i).text(); 
     $('#title'+i).html(txt); 
    } 
})