Shopify jQuery Seitennavigation - Grab Nav Titel nach ID

Question

Ich habe eine Shopify-Site, die lange Blog-Artikel hat, und ich bin auf der Suche nach einer Möglichkeit zum Erstellen der Navigation für den Artikel auf der linken Seite der Blog-Vorlage basierend auf dem H2 Stichworte.

Ich habe einige einfache jQuery und IDs verwendet, um Links zu den verschiedenen Teilen der Seite zu machen. Hier ist, was ich bisher habe.

HTML (Template)

<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> 

Jetzt ist hier der Code aus dem Blog-Eintrag selbst

<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> 
... 

Hier ist die jQuery ich sie alle zusammen setzen müssen

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); 

Ich bin kein Experte für Javascript oder jQuery. Gibt es eine Möglichkeit, diesen Code zu vereinfachen? Es sieht so aus, als würde ich im Moment zu viel schreiben und es könnte verschärft werden.

Answer 1

mit jquery:

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